芝麻web文件管理V1.00
编辑当前文件:/home/qrafawbu/rentandbuyrealty.com/themes/default/css/belloo.css
@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700); @import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Varela+Round); body { font-family: 'Roboto', sans-serif; } .right-space{ width: 6% !important; background:#eee; } .z-depth-1{ } .right-ad{ position:absolute; right:0px; top:30px; width:300px; height:600px; background:#eee; z-index:2; } .logo { position: absolute; height: 60px; width: 75%; top: 0; right:0; text-align:left; margin-left:20%; z-index: 2; padding-bottom:25px; margin-right:5%; } .logo img { margin-top:5px; margin-left:10px; width: 180px; } .sl10 { width:80% !important; border-left:1px solid #e0e0e0; } .left-menu-margin{ width:20% !important; background: #eee; } .menu-margin{ width: 75% !important; text-align:left !important; margin-left:20% !important; z-index: 2; padding-bottom:25px !important; margin-right:5% !important; } .fix-width{ width: 15% !important; /*border-right:1px solid #e0e0e0;*/ } .fix-width-content{ width: 85% !important; height: 100% !important; } .menu-selected { color:#aa0000; } .user-left { position:absolute; top:25px; width:100%; height:150px; padding:10px; margin-top:20px; } .user-left .profile-photo{ position:absolute; display:inline-block; width:50px; height:50px; left: 10px; } .user-left .user-name{ position:absolute; top:35px; width:130px; margin-left:76px; color:#555; font-weight:500; padding:1px; } .user-left .user-name-sub{ position:absolute; top:60px; width:130px; margin-left:76px; color:#40B900; font-size:12px; font-weight:300; padding:1px; } .user-left .user-coins{ position:absolute; left:15px; top:110px; width:50px; padding-right:10px; cursor:pointer; } .user-left .user-coins span{ position:absolute; left:25px; color:#777; font-size:14px; } .user-left .user-vip{ position:absolute; right:25px; top:110px; width:50px; float:right; padding-right:10px; cursor:pointer; } .user-left .user-vip span{ position:absolute; top: -3px; left:32px; color:#777; } .user-left .user-popularity{ width:230px; margin-left:60px; margin-top:-6px; color:#aaa; font-weight:300; padding:1px; } .user-left .btn-popularity{ display:inline-block; width:180px; margin-left:30px; margin-top:15px; margin-bottom:20px; font-weight:700; text-align: center; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 190%; opacity: 1; background: #dd10db; border-radius: 20px; } .menu { position: relative; height: 100%; width: 100%; padding-top: 60px; background: #eee; margin: 0 auto; z-index: 1; } .menu .user-left .profile-photo { position: relative; margin: 0 auto; margin-top: 20px; width: 55px; height: 55px; border-radius: 20px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .menu ul { position:relative; margin-top: 125px; width:95%; float:right; } .menu ul li { position:relative; margin-top: 10px; width: 100%; height:25px; border-radius:5px; cursor:pointer; padding:2px; } .menu ul li span{ position:absolute; top:16px; left:45px; font-family:'Roboto'; font-size:14px; font-weight:500; color:#666; line-height:5px; } .menu ul li i { margin-left: 0; font-size: 26px; color: #1a1a1a; cursor: pointer; } .menu ul li .new { position: absolute; margin-top: 5px; left: 65%; z-index: 100; width: 7px; height: 7px; border-radius: 7px; background: #ff5f35; } .real { position: relative; height: 100%; width: 100%; top: 0; left: 0; } .hidden { overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; } .wall-title { position:relative; top: 0px; margin-top: 0px; margin-left: 30px; width: 100%; height: 10%; overflow-y: auto; overflow-x: hidden; } .wall-title h1{ font-size: 20px; font-weight: 300; color: #444; line-height: 0%; } .profile-content { position:relative; top: 0px; width: 100%; height: 88%; overflow-y: auto; overflow-x: hidden; line-height: 100%; } .profile-content-photos { position:relative; top: 0px; width: 100%; height: 90%; overflow-y: auto; overflow-x: hidden; line-height: 100%; border-bottom: 1px solid #f8f8f8; } .profile-content-photos .photos{ position:relative; top: 0px; width: 100%; height:100%; padding: 5px; padding-left: 10px; padding-top: 20px; } .profile-content-photos .photos .photo{ position: relative; display: inline-block; width: 170px; height: 170px; margin-right: 2px; margin-top: -8px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .profile-content-photos .photos .photo img{ display: none; } .profile-content-photos .photos .photo .data{ position: absolute; bottom: 0; left:0; padding-left:10px; height: 100%; width: 100%; border-radius: 10px; z-index: 100; color: #fff; font-size: 12px; display: none; background: rgba(0,0,0,.1); } .profile-content-photos .photos .photo .data a{ position: relative; top: 88%; float: right; color: #fff; margin-right: 5px; } .profile-content-photos .photos .photo .data i{ font-size: 16px; margin-left: 3px; margin-right: 10px; } .user-spot { position:relative; top:0px; width: 100%; overflow-y: hidden; overflow-x: hidden; background:#232937; } #user-spot { position:relative; width: 100%; height:75%; overflow-x: hidden; overflow-y: hidden; background:#232937; } #user-spot .profile-photo { position: relative; width: 100%; height: 20%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; opacity:0.6; } #user-spot .profile-photo i{ position: absolute; top: 10px; left: 10px; font-size: 12px; color:#17d425; } #user-spot .profile-photo:hover { opacity:1; } .user-spot .profile-photo { position: relative; width: 100%; height: 15%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .user-spot .profile-photo:hover{ } .user-spot .add-yourself { position: relative; top: 0; width: 100%; height: 15%; background: rgba(0,0,0,.7); cursor: pointer; overflow: visible; z-index: 100; } .user-spot .load-more { position: relative; bottom: 0; width: 100%; height: 10%; line-height: 500%; z-index: 100; background:#232937; } .user-spot .load-more i{ margin-left: 23%; color:#90caf9; font-size: 64px; cursor: pointer; } .user-spot .add-yourself i{ margin: 0 auto; margin-left: 23%; color:#90caf9; font-size: 64px; } .follow-suggest { position:relative; top: 0px; width: 100%; height:80px; line-height: 100%; border-bottom: 1px solid #f8f8f8; border-top: 1px solid #f8f8f8; } .follow-suggest .profile-photo { margin-top: 10px; height: 70%; width: 24%; max-width:60px; border-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: top center; } .follow-suggest h2 { position: absolute; top: -30px; left: 65px; color: #333; font-size: 14px; font-weight: 600; } .follow-suggest span { position: absolute; top: 35px; left: 65px; color: #93aab1; font-size: 12px; font-weight: 300; } .follow-suggest a { position: absolute; top: 20px; left: 195px; color: #ff5f35; font-size: 12px; font-weight: 300; } .profile-content h1 { margin-top: 10px; font-weight: 300; font-size: 24px; color: #888; } .profile-content .bubble{ display: inline-block; margin-right: 50px; margin-left: 50px; width: 80px; height: 80px; background: #edf6ff; border-radius: 50px; } .profile-content .bubble i{ position: relative; top: 30px; font-size: 35px; color: #5177a4; } .profile-content .bubble h3 { position: relative; top: 30px; font-size: 18px; font-weight: 600; text-align: center; color: #333; } .profile-content .bubble #city{ position: relative; width: 300%; left: -80px; top: 30px; font-size: 18px; font-weight: 600; text-align: center; color: #333; } .profile-content .bubble span{ position: relative; top: 5px; font-size: 12px; font-weight: 300; color: #888; } .search-btn-ok{ position: absolute; top: 195px; left: 38%; width: 100px; height: 33px; text-align: center; cursor: pointer; font-family: 'Montserrat'; font-size: 13px; font-weight: 700; line-height: 230%; border-radius: 25px; color:#fff; background:#2B65F8; z-index: 100; } .search-btn-cancel{ position: absolute; top: 195px; right: 38%; width: 100px; height: 33px; text-align: center; cursor: pointer; font-family: 'Montserrat'; font-size: 13px; font-weight: 700; line-height: 230%; border-radius: 25px; color:#606060; border:1px solid #dedede; background:#fff; z-index: 100; } .premium-btn-right{ position: absolute; top: 12px; right: 10px; width: 140px; height: 35px; text-align: center; cursor: pointer; font-family: 'Comfortaa', cursive; font-size: 15px; font-weight: 700; line-height: 225%; border-radius: 25px; color:#fff; background:#1a50d9; z-index: 100; } .premium-btn-right img{ position: absolute; top: 2px; left: 5px; } .premium-btn-right:hover{ } .comforta{ font-family: 'Comfortaa', cursive !important; } .post-btn-right{ position: absolute; top: 22px; right: 8%; width: 20%; height: 35px; text-align: center; color: #fff; cursor: pointer; font-family: 'Comfortaa', cursive; font-size: 15px; font-weight: 700; line-height: 200%; background: none; border-radius: 20px; border-width: 2px; z-index: 100; } .post-btn-right:hover{ opacity: 1; background: none; } .post-btn-right-close{ position: absolute; top: 12px; right: 2%; width: 7%; height: 35px; text-align: center; color: #fff; cursor: pointer; font-size: 24px; font-weight: 600; line-height: 140%; opacity: 1; background: #db4040; border-radius: 20px; z-index: 100; display: none; } .post-btn-right-close:hover{ opacity: 1; background: #d51a1a; } .rotate { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rotate-reset { transform: rotate(0deg); transition: .3s; } [data-tooltip] { z-index: 2; } [data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tooltip]:before { position: absolute; bottom: 105%; left: 50%; margin-bottom: 5px; margin-left: -50px; padding: 7px; width: 100px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tooltip]:after { position: absolute; bottom: 105%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .chat { position:relative; top: 0; width: 88% !important; margin-left: 1%; padding-left: 4%; height:375px; background: #fff; overflow-y: auto; overflow-x: hidden; border-bottom: 1px solid #f2f2f2; } .chat-right { position:fixed; top: 110px; right: 170px; width: 12% !important; padding-left: 0; height:100%; min-height:400px !important; overflow-y: auto; overflow-x: hidden; background: none; z-index: 99; } .chat .post .left{ position: relative; width: 80%; padding-bottom: 5px; padding-top: 5px; } .chat .post .left .photos1{ margin-left: 16%; width: 55%; height: 55%; padding-bottom: 5px; background: #fff; border-radius: 15px; } .chat .post .left .photos1 .post-photo1{ position: relative; width: 100%; height: 100%; border-radius: 15px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .chat .post .left h1{ position: absolute; top: -19px; margin: 0; padding: 0; left: 3%; font-size: 16px; font-weight: 500; color: #333; } .chat .post .left .you{ position: relative; display: block; margin-top: 25px; left: 1%; font-size: 14px; font-weight: 400; color: #666; padding-bottom: 3px; background: #f0f0f0; padding: 10px; padding-left: 15px; padding-right: 15px; border-radius: 15px; width: 75%; } .chat .post .left .access{ position: relative; display: inline-block; left: 5%; font-size: 14px; font-weight: 400; color: #666; padding-bottom: 3px; background: #fff; border: 1px solid #4accff; padding-left: 15px; padding-right: 15px; border-radius: 15px; } .chat .post .left .access i{ color:#4accff; } .chat .post .left .me{ position: relative; display: block; width: 65%; margin-top: 25px; left: 1%; font-size: 14px; font-weight: 400; color: #fff; padding-bottom: 3px; background: #2B65F8; padding: 10px; padding-left: 15px; padding-right: 15px; border-radius: 15px; } .chat .post .left .profile-photo{ position: absolute; top: 3%; left: 2%; width: 50px; height: 50px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; } .your-photos { position:absolute; top: 10%; left: 20%; right: 20%; bottom: 10%; width: 60%; height: 80%; margin: 0 auto; border-radius: 10px; background: #fff; z-index: 110; } .your-photos .title { position:absolute; top: 0; left: 0; width: 100%; height: 10%; background: #f6f7f8; border-top-left-radius: 10px; border-top-right-radius: 10px; } .your-photos .title h3{ position: relative; top: -30%; left: 2%; font-size: 18px; font-weight: 500; } .your-photos .title i{ position: absolute; top: 10%; right: 2%; float: right; font-size: 28px; font-weight: 500; cursor: pointer; opacity: .6; } .your-photos .title i:hover{ opacity: 1; } .your-photos .footer { position:absolute; display: inline-block; bottom: 0; left: 0; width: 100%; height: 10%; background: #f6f7f8; text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } @media only screen and (max-width : 600px) { .your-photos{ top: 2%; left: 2%; right: 2%; bottom: 2%; width: 96%; height: 96%; } } .your-photos .footer h3{ position: relative; display: inline-block; top: 0; margin: 0 auto; padding-left: 5%; padding-right: 5%; font-size: 20px; font-weight: 500; } .your-photos .footer h3 i{ position: absolute; margin-left: -25%; font-size: 28px; } .your-photos .photos{ position:relative; top: 12%; width: 100%; height:72%; overflow-x: hidden; overflow-y: auto; padding: 5px; padding-left: 10px; padding-top: 20px; } .your-photos .photos .photo{ position: relative; display: inline-block; width: 15%; height: 32%; margin-right: 3px; margin-top: -8px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .your-photos .photos .selected{ border: 2px solid #009ae0; } .your-photos .photos .photo img{ display: none; } .your-photos .photos .photo .data{ position: absolute; bottom: 0; left:0; padding-left:10px; height: 100%; width: 100%; border-radius: 10px; z-index: 100; color: #fff; font-size: 12px; display: none; background: rgba(0,0,0,.4); } .your-photos .photos .photo .data a{ position: relative; top: 77%; float: right; color: #fff; margin-right: 5px; } .your-photos .photos .photo .data i{ font-size: 16px; margin-left: 3px; margin-right: 10px; } .overlay { position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99989; background: rgba(0,0,0,0.75); } .overlay-dark { position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99989; background: rgba(0,0,0,1); } .discover-menu { position:relative; top: 3.5%; left: 0%; width: 50%; height: 10%; margin: 0 auto; z-index: 100; } .discover-back{ position:absolute; top: 0; left: 7%; right: 5%; width: 78%; height: 65%; margin: 0 auto; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.75))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); background: linear-gradient(to top, rgba(0,0,0,0) 70%,rgba(0,0,0,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); z-index: 99; } .discover-menu h3{ color: #edf6ff; padding: 0; padding-left: 6%; margin: 0; font-size: 18px; font-weight: 300; } .discover-menu h3 b{ color: #fff; padding: 0; padding-left: 20px; margin: 0; font-size: 18px; font-weight: 600; } .discover-menu span{ position: absolute; color: #edf6ff; padding: 0; padding-left: 12%; margin: 0; margin-top: -10px; padding-bottom: 20px; font-size: 14px; font-weight: 300; } .discover-menu .like{ position: absolute; top: 0; right: -10%; background: #3fc000; padding: 20px; width: 20%; height: 100%; border-radius: 50px; z-index: 3; cursor: pointer; opacity: .9; } .discover-menu .like:hover{ opacity: 1; } .discover-menu .like span{ position: absolute; top: -2px; right: -2px; background: #333; color: #fff; padding: 5px; padding-left: 7px; padding-right: 7px; font-size: 10px; font-weight: 500; border-radius: 50px; z-index: 3; border: 4px solid #edf6ff; } .discover-menu .like i{ position: absolute; top: 20%; right: 20%; color: #fff; font-size: 24px; padding: 5px; padding-left: 7px; padding-right: 7px; font-weight: 500; border-radius: 50px; z-index: 3; } .discover-menu .unlike{ position: absolute; top: 0; right: 14%; background: #da4344; padding: 20px; width: 20%; height: 100%; border-radius: 50px; z-index: 3; cursor: pointer; opacity: .9; } .discover-menu .unlike:hover{ opacity: 1; } .discover-menu .unlike i{ position: absolute; top: 20%; right: 25%; color: #fff; font-size: 24px; padding: 5px; padding-left: 7px; padding-right: 7px; font-weight: 500; border-radius: 50px; z-index: 3; } .discover-menu .profile-photo{ position: absolute; top: 0; left: -12%; background: #fff; padding: 20px; width: 20%; height: 100%; border-radius: 50px; border:2px solid #edf6ff; background-size: cover; background-repeat: no-repeat; background-position: top center; z-index: 3; } .discover { position:absolute; top: 110px; left: 0; width: 100%; margin: 0 auto; } .gall { position:absolute; top: 110px; left: 0; width: 100%; margin: 0 auto; } .discover .profile-photo{ position: absolute; top: 0; left: 0; background: #fff; padding: 20px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; z-index: 3; } .wall { position:relative; top: 0px; width: 100%; height: auto; padding-top: 0; background: #fff; } .scroll{ overflow-y: auto; overflow-x: hidden; } .top-user-header h2 .premium{ position:relative; display:inline-block; margin-left:5px; top: 4px; width: 20px; height: 20px; border-radius: 50px; cursor: pointer; background:#9121f0; border:2px solid #9121f0; color: #fff; } .top-user-header h2 .premium i{ position: absolute; top:-20px; padding: 0; left:2px; color:#fff; font-size: 11px; opacity: 1; } .top-user-header h2 .popular{ position:relative; display:inline-block; margin-left:0px; top: 4px; width: 20px; height: 20px; border-radius: 50px; cursor: pointer; background:#f04d21; border:2px solid #f04d21; color: #fff; } .top-user-header h2 .popular i{ position: absolute; top:-20px; padding: 0; left:2px; color:#fff; font-size: 11px; opacity: 1; } .top-user-header h2 .verified{ position:relative; display:inline-block; margin-left:0px; top: 4px; width: 20px; height: 20px; border-radius: 50px; cursor: pointer; background:#5ec735; border:2px solid #5ec735; color: #fff; } .top-user-header h2 .verified i{ position: absolute; top:-20px; padding: 0; left:2px; color:#fff; font-size: 11px; opacity: 1; } .wall .search .footer .premium:hover{ } .wall .search .footer .verified{ position: absolute; left:140px; top:-5px; margin-top: 0px; width: 30px; height: 30px; border-radius: 50px; margin-right: 2px; cursor: pointer; background:#5ec735; border:3px solid #fff; } .wall .search .footer .verified i{ position: absolute; padding: 0; margin-left: -8px; font-size: 16px; color:#fff; opacity: 1; } .wall .search .footer .verified:hover{ } .wall .search .footer .popular{ position: absolute; left:66px; top:15px; margin-top: 0px; width: 30px; height: 30px; border-radius: 50px; margin-right: 2px; cursor: pointer; background:#f04d21; border:3px solid #fff; } .wall .search .footer .popular i{ position: absolute; padding: 0; margin-left: -8px; font-size: 16px; color:#fff; opacity: 1; } .wall .search .footer .popular:hover{ } .wall .post{ position: relative; width: 99%; height: 500px; margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; } @media only screen and (min-width: 1620px) { .logo img { margin-left:45px; } .wall .post{ height: 650px; } .wall .search{ } .chat { height:540px; } } .wall .post .left{ position: absolute; width: 80%; height: 100%; } .wall .post .left .photos1{ margin-left: 15%; width: 75%; height: 75%; } .wall .post .left .photos1 .post-photo1{ position: relative; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .wall .post .left .photos2{ position: relative; margin-left: 15%; width: 100%; height: 75%; } .wall .post .left .photos2 .post-photo1{ position: absolute; width: 50%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .wall .post .left .photos2 .post-photo2{ position: absolute; left: 50%; width: 50%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .wall .post .left .photos3{ position: relative; margin-left: 15%; width: 100%; height: 75%; } .wall .post .left .photos3 .post-photo1{ position: absolute; width: 60%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .wall .post .left .photos3 .post-photo2{ position: absolute; top: 0; margin-left: 60%; width: 40%; height: 50%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .wall .post .left .photos3 .post-photo3{ position: absolute; margin-left: 60%; bottom: 0; width: 40%; height: 50%; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .wall .post .left h1{ position: absolute; top: -20px; margin: 0; padding: 0; left: 16%; font-size: 16px; font-weight: 500; color: #6799d0; } .wall .post .left h1 i{ font-size: 8px; color:#17d425; } .wall .post .left p{ position: relative; width: 90%; margin-top: 25px; min-height: 20px; max-height: 60px; overflow: hidden; left: 16%; font-size: 14px; font-weight: 400; color: #666; } .wall .post .left .profile-photo{ position: absolute; top: 0; left: 2%; width: 50px; height: 50px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; } .wall .post .right{ position: absolute; padding-left: 20%; width: 40%; right: 0; height: auto; } .wall-chat { position:relative; top: 0px; width: 99%; margin-left: 1%; padding-left: 4%; padding-top: 2%; height:85px; background: #fefefe; overflow-y: hidden; overflow-x: hidden; border-bottom: 1px solid #f2f2f2; } .wall-chat .profile-photo{ position: relative; top: 0; width: 50px; height: 50px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; } .wall-chat .update-form{ position: absolute; top: 10%; left: 14%; width: 80%; height: 50px; } .wall-chat .update-form-btn{ position: relative; top: -20px; left: 0; width: 100%; height: 40px; } .wall-chat .update-form-btn .post-btn{ position: absolute; top: 0px; right: 5%; width: 15%; height: 60%; text-align: center; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 190%; opacity: .7; background: #739cca; border-radius: 20px; } .wall-chat .update-form-btn .post-btn:hover{ opacity: 1; background: #598bcb; } .wall-chat .update-form-btn .post-btns{ position: absolute; top: -3px; right: 24%; width: 50%; height: 100%; } .wall-chat .update-form-btn .post-btns i{ position: relative; font-size: 22px; float: right; margin-left: 10px; cursor: pointer; color: #739cca; opacity: .7; } .wall-chat .update-form-btn .post-btns .off{ color: #ccc; opacity: .7; } .wall-chat .update-form-btn .post-btns i:hover{ opacity: 1; } .wall-chat .update-form input{ position: relative; width: 100%; height: 50px; background: none; border: none; outline: none; } .wall-chat .update-form input:focus{ outline: none; border: none; } .wall-post { position:relative; top: 0px; width: 100%; margin-left: 1%; padding-left: 4%; padding-top: 2%; height:85px; background: #fefefe; overflow-y: hidden; overflow-x: hidden; border-bottom: 1px solid #f2f2f2; display: none; } .wall-post .profile-photo{ position: relative; top: 0; width: 50px; height: 50px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; } .wall-post .update-form{ position: absolute; top: 10%; left: 14%; width: 80%; height: 50px; } .wall-post .update-form-btn{ position: relative; top: -20px; left: 0; width: 100%; height: 40px; } .wall-post .update-form-btn .post-btn{ position: absolute; top: 0px; right: 5%; width: 15%; height: 60%; text-align: center; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 190%; opacity: .7; background: #739cca; border-radius: 20px; } .wall-post .update-form-btn .post-btn:hover{ opacity: 1; background: #598bcb; } .wall-post .update-form-btn .post-btns{ position: absolute; top: -3px; right: 24%; width: 50%; height: 100%; } .wall-post .update-form-btn .post-btns i{ position: relative; font-size: 22px; float: right; margin-left: 10px; cursor: pointer; color: #739cca; opacity: .7; } .wall-post .update-form-btn .post-btns .off{ color: #ccc; opacity: .7; } .wall-post .update-form-btn .post-btns i:hover{ opacity: 1; } .wall-post .update-form input{ position: relative; width: 100%; height: 50px; background: none; border: none; outline: none; } .wall-post .update-form input:focus{ outline: none; border: none; } .search-post { position:relative; top: -10px; width: 90%; margin-left: 5%; padding-left: 4%; padding-top: 2%; height:240px; background: #F7F7F7; overflow-y: hidden; overflow-x: hidden; border: 1px solid #dadada; display: none; } .search-post .coll { position: relative; width:31%; height:140px; margin-top:20px; display:inline-table; border-right:1px solid #d2d2d2; } .search-post .coll .search-title{ position:relative; width:100%; margin-bottom:14px; font-family:'Montserrat'; font-size:14px; color:#404040; } .search-filter-input{ position:relative; width:80% !important; background:#fff !important; border:1px solid #d2d2d2 !important; border-radius: 25px !important; padding-left:15px !important; padding-top:8px !important; padding-bottom:8px !important; margin:0 !important; font-size:13px !important; } .search-filter-input:focus{ border:1px solid #2B65F8 !important; outline:none; } .radio { margin-bottom:10px; } .radio input[type="radio"] { position: absolute; opacity: 0; } .radio-label{ font-family:'Montserrat'; font-size:13px; letter-spacing:-0.5px; color:#909090; } .radio input[type="radio"] + .radio-label:before { content: ''; background: #fff; border-radius: 100%; border: 2px solid #b4b4b4; display: inline-block; width: 1.2em; height: 1.2em; position: relative; top: -0.05em; margin-right: .5em; vertical-align: top; cursor: pointer; text-align: center; font-size:16px; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .radio input[type="radio"]:checked + .radio-label:before { background-color: #fff; border: 6px solid #275BDF; } .radio input[type="radio"]:focus + .radio-label:before { outline: none; border: 6px solid #275BDF; } .radio input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #f4f4f4; background: #b4b4b4; } .radio input[type="radio"] + .radio-label:empty:before { margin-right: 0; } .radio input[type="radio"] { position: absolute; opacity: 0; } .radio input[type="checkbox"] + .radio-label:before { content: ''; background: #fff; border-radius: 100%; border: 2px solid #b4b4b4; display: inline-block; width: 1.2em; height: 1.2em; position: relative; top: -0.05em; margin-right: .5em; vertical-align: top; cursor: pointer; text-align: center; font-size:16px; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .radio input[type="checkbox"]:checked + .radio-label:before { background-color: #fff; border: 6px solid #275BDF; } .radio-label{ font-family:'Montserrat'; font-size:13px !important; letter-spacing:-0.5px; color:#909090; } .profile-h{ font-family:'Montserrat' !important; color: #555; font-weight: bold; font-size: 18px; margin:0 !important; } .montserrat{ font-family:'Montserrat' !important; } .search-post .update-form{ position: absolute; top: 2%; left: 14%; width: 90%; height: 50px; } .search-post .update-form select{ position: relative; display: inline-block; top: 10px; width: 12%; border: none; background: none; font-weight: 600; color: #679fd5; cursor: pointer; } .search-post .update-form select:focus{ outline: none; } .search-post .update-form span{ position: relative; top: 20%; left: 0; width: 20%; height: 50px; } .search-post .update-form-btn{ position: relative; top: -20px; left: 0; width: 100%; height: 40px; } .search-post .update-form-btn .post-btn{ position: absolute; top: 0px; right: 5%; width: 15%; height: 60%; text-align: center; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 190%; opacity: .7; background: #739cca; border-radius: 20px; } .search-post .update-form-btn .post-btn:hover{ opacity: 1; background: #598bcb; } .search-post .update-form-btn .post-btns{ position: absolute; top: -3px; right: 24%; width: 50%; height: 100%; } .search-post .update-form-btn .post-btns i{ position: relative; font-size: 22px; float: right; margin-left: 10px; cursor: pointer; color: #739cca; opacity: .7; } .search-post .update-form-btn .post-btns .off{ color: #ccc; opacity: .7; } .search-post .update-form-btn .post-btns i:hover{ opacity: 1; } .search-post .update-form input{ position: relative; width: 100%; height: 50px; background: none; border: none; outline: none; } .search-post .update-form input:focus{ outline: none; border: none; } .bottom-user-header { position:relative; top: 0px; margin-left: 0; width: 100%; height:110px; overflow-y: hidden; overflow-x: hidden; line-height: 100%; background:#fff; } .top-user-header { position:relative; top: 0px; margin-left: 0; width: 100%; height:110px; overflow-y: hidden; overflow-x: hidden; line-height: 100%; background:#fff; } .top-user-header-left{ position:relative; top: 0px; width: 58%; height:110px; overflow-y: hidden; overflow-x: hidden; display: inline-block; background:none; padding-top: 30px } .top-user-header-right{ position:relative; top: 0px; width: 41%; height:110px; overflow-y: hidden; overflow-x: hidden; display: inline-block; background:none; padding-top: 30px } .top-user-header h2{ position:absolute; top: -8px; left: 200px; font-size:21px; font-weight:500; } .top-user-header span{ position:absolute; top: 64px; left: 201px; font-size:12px; font-weight:400; color:#aaa; } .top-user-header .icons{ position:absolute; top: 60px; left: 2px; font-size:12px; font-weight:400; color:#aaa; } .top-user-header .online{ color:#2acf2a; } .top-user-header img{ width:90px; border-radius:50%; cursor:pointer; transition: 0.1s ease; } .top-user-header img:hover{ transform: scale(1.02, 1.04); } .top-user-header .like-top{ margin-left:15px; margin-top:10px; margin-right:0px; } .top-menu-meet{ margin-top: 10px; border-radius: 10px !important; width: 90% !important; margin-left: 5% !important; } .profile-menu { position:relative; top: 0px; margin-left: 0; width: 100%; height:60px; overflow-y: hidden; overflow-x: hidden; line-height: 100%; background:#2B65F8; } .profile-menu ul{ position: relative; color:#f2f2f2; font-size: 16px; font-weight: 400; } .profile-menu ul li { position: relative; height: 100%; padding-top:25px; padding-bottom: 24px; padding-right: 12px; padding-left: 12px; margin-left: 15px; margin-right: 15px; top:4px; display: inline; list-style-type: none; cursor: pointer; font-family: 'Comfortaa', cursive; } .profile-menu ul .selected{ color:#00C2F0; } .profile-menu ul li:hover { background: #6a9fdd; color:#fff; } .profile-photos { position:relative; top:0px; width: 1000px !important; max-width: 1000px !important; height:210px; overflow-y: hidden; overflow-x: hidden; white-space: nowrap; margin:0; padding:0; background:#232937; } .profile-photos-discover { position:relative; top:0px; width: 100%; height:15%; overflow-y: hidden; overflow-x: hidden; white-space: nowrap; margin:0; padding:0; background:#232937; border-bottom: 2px solid #ededed; } .profile-photos-chat { position:relative; top:0px; width: 100%; height:20%; overflow-y: hidden; overflow-x: hidden; white-space: nowrap; margin:0; padding:0; background:#232937; border-bottom: 2px solid #ededed; } .profile-photos-chat img { height: 100%; padding: 0; margin: 0; margin-right: -5px; } .profile-photos-chat .photos-count{ position: absolute; top: 6%; right: 2%; width:8%; height: 24%; border-radius: 25px; background: rgba(0,0,0,.45); z-index: 100; } .profile-photos-chat .photos-count i{ position: absolute; margin-left: 20%; margin-top: 10%; color:#fff; } .profile-photos-chat .photos-count span{ position: absolute; margin-left: 55%; margin-top: 12%; font-weight: 600; font-size: 12px; color:#fff; } .profile-photos-chat .profile-photo { position: relative; display: inline-block; margin-left: -5px; top: 0; width: 20%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; } .profile-photos .overlay{ position: absolute; bottom: 0px; width: 100%; height: 200px; z-index: 100; background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .profile-photos img { height: 100%; padding: 0; margin: 0; margin-right: -5px; } .profile-top-left { position: absolute; height: 45%; width: 100%; background:#232937; } .profile-top-left .user-name{ position: absolute; top: 0; width: 100%; height: 300px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.75))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* IE10+ */ background: linear-gradient(to top, rgba(0,0,0,0) 70%,rgba(0,0,0,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ z-index: 5; } .profile-top-left .user-controls{ position: absolute; bottom: 0; width: 100%; height: 400px; padding-top: 160px; background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 70%,rgba(0,0,0,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ z-index: 5; } .profile-top-left .user-controls .videocall{ position: relative; margin: 0 auto; top: 130px; left: 30px; width: 50px; height: 50px; background: rgba(255,255,255,.5); border-radius: 50px; cursor: pointer; } .profile-top-left .user-controls .videocall i{ position: relative; top: 4px; left: 10px; font-size: 30px; color: rgba(255,255,255,.9); } .profile-top-left .user-controls .videocall span{ position: relative; top: 4px; left: 3px; font-size: 10px; color: rgba(255,255,255,.7); } .profile-top-left .user-controls h3{ position: relative; bottom: 0; width: 100%; float: left; padding-left: 20px; font-weight: 100; font-size: 12px; color: #fff; line-height: 20%; margin-top: 0; opacity: .75; cursor: pointer; } .profile-top-left .user-controls h3:hover{ opacity: 1; } .profile-top-left .user-name h1{ width: 82%; float: left; padding-left: 20px; font-weight: 300; font-size: 22px; color: #fff; line-height: 90%; padding-top: -20px; margin-top: 14px; overflow: hidden; } .profile-top-left .user-name h1 img{ position: relative; top: 4px; width: 20px; cursor: pointer; } .profile-top-left .user-name h1 i{ position: relative; top: 0px; font-size: 12px; line-height: 100%; cursor: pointer; } .profile-top-left .profile-photo { position: relative; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; } .profile-photo { background-size: cover; background-repeat: no-repeat; background-position: top center; } .profile-bottom-left { position: absolute; height: 100%; width: 100%; top: 0; overflow-y: hidden; overflow-x: hidden; background: #f9f9f9; } .profile-bottom-left .header{ position: absolute; left:0; height: 61px; width: 100%; overflow-y: hidden; overflow-x: hidden; background: #2B65F8; border-bottom:1px solid #eee; z-index:99; } .profile-bottom-left .chat-right-section{ position: relative; height: 100%; margin-top:60px; padding-top:0px; width: 100%; overflow-y: hidden; overflow-x: hidden; background: none; border-left:1px solid #e0e0e0; } .profile-bottom-left .chat-right-section .ads{ position: absolute; width:100%; bottom:60px; background:#f9f9f9; height: 270px; padding:5px; overflow-y: hidden; overflow-x: hidden; border-top:1px solid #e0e0e0; z-index:1; } .profile-bottom-left .chat-right-section .ads span{ position: absolute; width:100%; bottom:5px; color:#aaa; font-size:10px; float:right; font-weight:700; } .profile-bottom-left select{ background: #fff; font-size: 14px; font-weight: 500; padding-left: 15px; margin-right:25px; cursor: pointer; width:100%; } .profile-bottom-left select:focus{ outline: none; } .profile-bottom-left p{ font-size: 14px; font-weight: 400; color: #888; padding-left: 10px; padding-right: 10px; } .profile-bottom-left .title{ position: relative; width: 100%; height: 45px; padding:5px; } .profile-bottom-left .title h1{ position: absolute; top: -30px; padding: 20px; padding-left: 25px; margin: 0 auto; font-size: 18px; color: #666; } .sidebar-friends { position:relative; height:55px; border: 0px solid #EEE; padding: 10px; vertical-align: top; width: 100%; } .friend-list { position:absolute; left:0; cursor: pointer; height: 100%; width: 100%; padding: 8px 8px; margin-bottom:10px; } .friend-list:hover { background:#eee; } .friend-selected { background:#eee; } .friend-list .profile-photo { position: relative; width: 40px; height: 40px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .friend-list h3 { font-weight: 500; font-size:14px; color:#333; margin-left: 45px; position: absolute; top:-18px; left: 10px; width:100%; } .friend-list h4 { font-weight: bold; font-size:10px; color:#666; margin-left: 60px; position: absolute; top:0px; left: 10px; width:100%; } .friend-list p { font-weight: 400; font-size:10px; color:#999; margin-left: 60px; position: absolute; top:3px; left: 0px; width:100%; } .friend-list span { border: 2px solid #FFF; border-radius: 50px; height: 0px; padding: 5px; position: absolute; left: 8px; top: 65%; width: 0px; } .friend-list .notification { position: absolute; border-radius: 50px; height: 10px; width:10px; background-color:#ff8c00; right: 23px; top: 40%; } .friend-list .invideocall { position: absolute; right: 8px; top: 32%; width:30px; height:20px; background:none; } .friend-list .invideocall i { color:#3ab0ff; font-size:16; } .friend-list span.y {background: #13D213;} .friend-list span.a {background: #FFA051;} .friend-list span.n {background: #D0D0D0;} .facebook-button { color: #fff; text-decoration: none; padding: 15px 40px; background-image: -webkit-linear-gradient(#3b5998, #314b83); background-image: linear-gradient(#3b5998, #314b83); background-image: -moz-linear-gradient(#3b5998, #314b83); display: inline-block; border-radius: 5px; border: solid 1px #283e6b; box-shadow: inset 0px 1px rgba(255, 255, 255, 0.2); text-shadow: 0px 1px rgba(0, 0, 0, 0.4); font-weight: bold; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.3s; } .facebook-button:hover { background-image: -webkit-linear-gradient(#4466ac, #34518e); background-image: linear-gradient(#4466ac, #34518e); background-image: -moz-linear-gradient(#4466ac, #34518e); } .facebook-button:active { box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.3), 0px 1px rgba(255, 255, 255, 0.2); } @media all and (max-width: 600px) { .hide-mobile{ display:none !important; } } .hideFree{ display:none; } .payment { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #096DC9; border: 1px solid #CCC; border-radius: 5px; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.1); margin: 0 auto 50px; max-width: 850px; min-width: 240px; width: 90%; z-index:99990; } .payment input, .payment select { border-radius: 2px; font-family: 'Open Sans', sans-serif; font-size: 20px; height: 40px; margin: 0 10px 0 5px; padding: 0 5px; width: 80px; cursor: pointer; } .payment select { padding: 5px; -webkit-appearance: none; cursor: pointer; } .payment select:focus { border: 2px solid #09c66e; outline: none; } .payment .amount { background: #096DC9; height: 100%; border-radius: 4px 4px 0 0; color: white; font-size: 16px; font-weight: bold; line-height: 50px; margin-left: 17px; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .payment .options { background: #FAFAFA; border-radius: 0 0 4px 4px; overflow: hidden; padding: 20px; } .payment .options label { color: #333; display: block; font-size: 13px; margin-bottom: 10px; text-transform: uppercase; } .payment .options label.subscribe { padding-top: 10px; cursor: pointer; } .payment .options label.subscribe input, .payment .options label.subscribe p { float: left; } .payment .options label.subscribe input { margin: 6px 8px; } .donationCard .options label.subscribe p { font-size: 11px; max-width: 80%; } .payment .options fieldset.sm { float: left; width: 48%; cursor: pointer; } .payment .options fieldset.sm img{ width: 100%; cursor: pointer; } .payment .options fieldset.sm:nth-of-type(odd) { margin-right: 2%; } .payment .options .ccard { border-top: 1px dashed #CCC; margin-top: 20px; padding-top: 20px; } .payment .options input, .payment .options select { display: block; margin: 0 0 12px; width: 100%; } .payment .options button { background: #09C66E; border: 1px solid #06894C; border-radius: 4px; color: white; clear: both; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: bold; height: 50px; margin-top: 10px; padding: 0 20px; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); width: 100%; } .payment .options button.donate { background: #F8A11C; border-color: #BC7A16; box-shadow: inset 0 1px 2px #FC0, inset 0 -1px 2px #FC0; font-size: 14px; height: 30px; margin-top: 0; } .payment .options aside:first-child { border-right: 1px solid #CCC; float: left; padding-right: 20px; width: 57%; } .payment .options .other { float: left; padding-left: 20px; text-align: center; width: 43%; } .payment .options .other ul h4 { font-family: "Lato",Tahoma,Helvetica,Arial,sans-serif; font-size: 0.9375rem; font-weight: 400; margin-bottom: 12px; text-transform: uppercase; } .payment .options .other ul h4 ~ p { font-size: 12px; line-height: 150%; text-align: left; } .payment .options .other li:not(:last-child) { border-bottom: 1px solid #DDD; margin-bottom: 20px; padding-bottom: 20px; } .emoticons { position:absolute; bottom:8%; right:10%; z-index:99; width:200px; max-height:160px; display:none; overflow:auto; background-color:white; border:1px solid black; box-shadow:0 1px 2px rgba(0,0,0,.4); } .emoticons i { cursor:pointer; } .grayScale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .grayS { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .footer-content { position: relative !important; width: 100%; height:250px; overflow-y: hidden; overflow-x: hidden; margin: 0 auto; padding-top: 20px; } .footer-content .ad-zone{ position:relative; width: 728px; height:90px; margin:10px; margin: 0 auto; background-color:none; } .ad-zone-vertical{ margin-top:0px; width: 160px; height: 600px; background: none; } .ad-zone-vertical-right{ position: fixed!important; right: 0px; margin-top:0px; width: 160px; height: 600px; background: none; } .ad-zone-square{ position: relative; width: 200px; height: 200px; background: none; } .footer-content .download-apps{ position:relative; width: 80%; height:60px; margin-left: 10%; text-align: center; } .footer-content .download-apps h3{ font-family: 'Montserrat'; font-size:14px; font-weight:500; color:#c0c0c0; display:inline-table; margin:0 !important; padding:0 !important; margin-right:25px; } .footer-content .download-apps h2{ font-family: 'Montserrat'; font-size:14px; font-weight:700; color:#777; display:inline-table; margin-left:40px; opacity: 0.8; } .footer-content .download-apps img{ position:absolute; display:inline-block; top:36px; } .footer-content .bottom-left{ position:relative; width: 60%; height:60px; margin-left: 20%; text-align: center; } .footer-content .bottom-left h3{ font-family: 'Montserrat'; font-size:14px; font-weight:400; color:#777; display:inline-table; margin-right:25px; cursor:pointer; opacity: 0.6; } .footer-content .bottom-left h3:hover{ opacity: 1; } .footer-content .bottom-left h2:hover{ opacity: 1; } .loader { height:60px; width:60px; margin:0px auto; position:relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left:6px solid rgba(22,159,230,.8); border-right:6px solid rgba(22,159,230,.8); border-bottom:6px solid rgba(22,159,230,.8); border-top:6px solid rgba(255,255,255,.0); border-radius:100%; } .call-loader { display: block; border-radius: 1em; background-color: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 0.8em; height: 0.8em; -webkit-animation: dim 0.5s 0.5s infinite alternate; -moz-animation: dim 0.5s 0.5s infinite alternate; -o-animation: dim 0.5s 0.5s infinite alternate; animation: dim 0.5s 0.5s infinite alternate; } .call-loader:before { content: ''; position: absolute; display: block; width: 0.8em; height: 0.8em; border-radius: 1em; background-color: #fff; right: 1.5em; -webkit-animation: dim 1s infinite alternate; -moz-animation: dim 1s infinite alternate; -o-animation: dim 1s infinite alternate; animation: dim 1s infinite alternate; } .call-loader:after { content: ''; position: absolute; display: block; width: 0.8em; height: 0.8em; border-radius: 1em; background-color: #fff; left: 1.5em; -webkit-animation: dim 1s 1s infinite alternate; -moz-animation: dim 1s 1s infinite alternate; -o-animation: dim 1s 1s infinite alternate; animation: dim 1s 1s infinite alternate; } /* Keyframes */ @-moz-keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); } } @-webkit-keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); } } @-o-keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); } } @keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); } } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);} } @-o-keyframes rotation { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(359deg);} } @keyframes rotation { from {transform: rotate(0deg);} to {transform: rotate(359deg);} } .videocall-notify { position:absolute; top:0; left:0; overflow-x:hidden; overflow-y:hidden; width:100%; height:100%; z-index:99000; background: rgba(0,0,0,0.7); } .videocall-container { position:absolute; top:0; left:0; overflow-x:hidden; overflow-y:hidden; width:100%; height:100%; z-index:99000; background: none; } .videopb{ position:absolute;top:-50px;left:-50px;height:120%;width:120%; background-size: cover; background-repeat: no-repeat; background-position: top center; -webkit-filter: blur(25px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(15px); } .videocall-chat { position:absolute; top:25px; right:25px; overflow-x:hidden; overflow-y:hidden; width:340px; height:340px; z-index:99001; background: none; cursor:move; display:none; } .videocall-chat video { background:none; height:100%; width:100%; } .videocall-container .calle { position:absolute; overflow-x:hidden; width:100%; height:100%; z-index:1004; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* IE10+ */ background: linear-gradient(to top, rgba(0,0,0,0) 70%,rgba(0,0,0,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .videocall-container .calle .loading { position:absolute; top:35%; left:37%; text-align:center; width:200px; z-index:7; margin: 0 auto; } .videocall-container .calle .user { position:absolute; top:20%; left:40%; width: 12em; text-align:center; color:#FFF; z-index:7; margin: 0 auto; } .videocall-container .calle .profile-photo1 { position:absolute; top:54%; left:37%; z-index:10; margin: 0 auto; background: #fff; width: 180px; height: 140px; padding: 0.25em; border-radius: .4em; margin-top: -6em; box-shadow: 0 0 .1em rgba(0, 0, 0, 0.35); } .videocall-container .calle .profile-photo1 video { background:#fff; color:#fff; height:100%; width:100%; } .videocall-container .calle .profile-photo1 img { background:#fff; color:#fff; height:100%; width:100%; display:none; } .videocall-container .calle .profile-photo2 { position:absolute; top:130px; left:380px; z-index:7; margin: 0 auto; background: #fff; width: 140px; height: 140px; border-radius: .4em; margin-top: -6em; } .video { position:absolute; z-index:8; margin: 0 auto; top:0; left:0; width: 100%; height: 100%; } .video .topleft { position:absolute; color:#fff; margin-left:20px; padding-top:20px; line-height:100%; font-size:14px; z-index:99999; } .video video { position:absolute; margin: 0 auto; top:0; left:0; width: 100%; height: 100%; } .videocall-container .calle .profile-photo2 { color:#fff; } .bulbs { position: absolute; top:70%; left:34%; z-index:1999; } .bulbs .bulb-1, .bulbs .bulb-2, .bulbs .bulb-3, .bulbs .bulb-4{ display: inline-block; width: 50px; height: 50px; background-repeat: no-repeat; background-size: contain; border-radius: 50%; opacity: 0; margin-right:15px; -webkit-transform: translateY(100px); -webkit-animation-name: bulb-move; -webkit-animation-iteration-count: 1; -webkit-animation-duration: .5s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: both; transform: translateY(100px); animation-name: bulb-move; animation-iteration-count: 1; animation-duration: .5s; animation-timing-function: ease-out; animation-fill-mode: both; } .bulbs .bulb-1 { background: rgba(222,2,2,0.7); -webkit-animation-delay: 1.2s; animation-delay: 1.2s; cursor:pointer; } .bulbs .bulb-1 span { position:absolute; left:6px; bottom:-11px; font-size:34px; padding-bottom:10px; color:#fff; } .bulbs .bulb-2 { background: rgba(0,0,0,0.7); -webkit-animation-delay: 1.4s; animation-delay: 1.4s; cursor:pointer; } .bulbs .bulb-2 span { position:absolute; left:7px; bottom:-13px; font-size:34px; padding-bottom:10px; color:#fff; } .bulbs .bulb-2:hover { cursor:pointer; } .bulbs .bulb-3 { background: rgba(0,0,0,0.7); -webkit-animation-delay: 1.6s; animation-delay: 1.6s; cursor:pointer; } .bulbs .bulb-3:hover { cursor:pointer; } .bulbs .bulb-3 span { position:absolute; left:8px; bottom:-11px; font-size:34px; padding-bottom:10px; color:#fff; } .bulbs .bulb-4 { background: rgba(0,0,0,0.7); -webkit-animation-delay: 1.8s; animation-delay: 1.8s; cursor:pointer; } .bulbs .bulb-4:hover { cursor:pointer; } .bulbs .sbulb { background: rgba(222,2,2,0.7); cursor:pointer; } .bulbs .bulb-4 span { position:absolute; left:8px; bottom:-9px; font-size:34px; padding-bottom:10px; color:#fff; } @-webkit-keyframes cursor-move { 40% { -webkit-transform: translate(193px, 147px); } 50% { -webkit-transform: translate(193px, 147px) scale(0.7); } 60% { -webkit-transform: translate(193px, 147px) scale(1); } 100% { -webkit-transform: translate(264px, 190px); } } @-webkit-keyframes circle-scale { 30% { -webkit-transform: scale(0.7); } 100% { -webkit-transform: scale(9); } } @-webkit-keyframes span-scale { to { -webkit-transform: scale(0.11) translate(-140px, 0) rotate(-405deg); } } @-webkit-keyframes bulb-move { to { -webkit-transform: translateY(0px); opacity: 1; } } @-webkit-keyframes restart-move { to { opacity: 1; -webkit-transform: translateY(-10px); } } @keyframes cursor-move { 40% { transform: translate(193px, 147px); } 50% { transform: translate(193px, 147px) scale(0.7); } 60% { transform: translate(193px, 147px) scale(1); } 100% { transform: translate(264px, 190px); } } @keyframes circle-scale { 30% { transform: scale(0.7); } 100% { transform: scale(9); } } @keyframes span-scale { to { transform: scale(0.11) translate(-140px, 0) rotate(-405deg); } } @keyframes bulb-move { to { transform: translateY(0px); opacity: 1; } } @keyframes restart-move { to { opacity: 1; transform: translateY(-10px); } } @keyframes calling { 0% { transform: scale(1); } 15% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4); } 25% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.2); } 25% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.2); } } .call-animation { background: #fff; position: absolute; top: 40%; left: 50%; margin-top: -50px; margin-left: -50px; height: 100px; width: 100px; z-index: 1; border-radius: 100%; border: solid 5px #fff; animation: calling 2s ease infinite; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .ball-container { position: absolute; top: 40%; left: 50%; margin-top: -50px; margin-left: -50px; height: 100px; width: 100px; border: 3px solid #FFF; z-index: 2; background-size: cover; background-repeat: no-repeat; background-position: top center; border-radius: 1000px; transform: scale(0); opacity: 0; transition-duration: 0; transition-timing-function: cubic-bezier(0.005, 0.95, 0.135, 1.205); } .ball-container .msg-count { position: absolute; top: 0; left: 0; color: #FFF; border: 2px solid #FFF; background: #3ab0ff; height: 25px; width: 25px; border-radius: 1000px; text-align: center; line-height: 50%; font-size: 12px; opacity: 0; transform: scale(0); transition-timing-function: cubic-bezier(0.005, 0.95, 0.135, 1.205); } .ball-container .msg-count i { margin-top:5px; } .ball-container .halo { position: absolute; top: 18px; left: 18px; right: 18px; bottom: 18px; border-radius: 1000px; background: rgba(255, 255, 255, 0.6); transform: scale(0); } .ball-container .notif { position: absolute; top: -50px; left: -45px; width: 183px; opacity: 0; } .ball-container .buttons { position: absolute; top: 110px; left: -75px; width: 250px; text-align:center; } .ball-container .notif .bar { position: relative; border-radius: 1000px; background: #FFF; height: 30px; line-height: 30px; width: 0; margin: 0 auto; padding: 0 10px; overflow: hidden; } .ball-container .notif .bar .text { position: absolute; margin: 0; font-size: 12px; color: #555; width: 175px; z-index: 1; } .ball-container .notif .bar .action { position: relative; z-index: 2; height: 20px; width: 20px; background: #BABABA; float: right; margin-top: 5px; border-radius: 100px; box-shadow: 10px 0 0 0 #FFF, -10px 0 10px 0 #FFF, inset 0 0 0 1px #FFF; border: 1px solid #BABABA; } .ball-container .notif .bar .action::after { content: ''; border-left: 5px solid #FFF; border-top: 4px solid transparent; border-bottom: 4px solid transparent; display: block; margin-left: 7px; margin-top: 4px; } .ball-container .notif .arrow { top: 30px; border-top: 7px solid #FFF; border-left: 7px solid transparent; border-right: 7px solid transparent; width: 0; margin: 0 auto; transform-origin: top; transform: scale(0); } .anim-start .ball-container { opacity: 1; transform: none; transition-duration: .3s; } .anim-start .ball-container .notif { opacity: 1; transition-duration: .2s; transition-delay: 1.6s; } .anim-start .ball-container .notif .bar { width: 100%; transition-duration: .6s; transition-delay: 1.6s; } .anim-start .ball-container .notif .arrow { transform: none; transition-delay: 1.6s; transition-duration: .3s; } .anim-start .ball-container .halo { opacity: 0; transform: none; transition-duration: .6s; transition-delay: 1.2s; } .anim-start2 .ball-container .halo { opacity: 0; transform: none; transition-duration: .6s; transition-delay: 1.2s; } .anim-start .ball-container .msg-count { opacity: 1; transform: none; transition-duration: .3s; transition-delay: .6s; } .btn-accept { background-color: rgb(100,142,49); background-image: -moz-linear-gradient(top, rgba(100,142,49,1) 0%, rgba(57,93,15,1) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,142,49,1)), color-stop(100%,rgba(57,93,15,1))); background-image: -webkit-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%); background-image: -o-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%); background-image: -ms-linear-gradient(top, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%); background-image: linear-gradient(to bottom, rgba(100,142,49,1) 0%,rgba(57,93,15,1) 100%); margin-right: 10px; } .btn-accept:hover { background: rgba(100,142,49,1); } .btn-accept:active { background: rgba(57,93,15,1); box-shadow: inset 0 0 3px rgba(0,0,0,0.5); } .btn-decline { background-color: rgb(203,90,90); background-image: -moz-linear-gradient(top, rgba(203,90,90,1) 0%, rgba(141,62,62,1) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,90,90,1)), color-stop(100%,rgba(141,62,62,1))); background-image: -webkit-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%); background-image: -o-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%); background-image: -ms-linear-gradient(top, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%); background-image: linear-gradient(to bottom, rgba(203,90,90,1) 0%,rgba(141,62,62,1) 100%); margin-left: 10px; } .btn-decline:hover { background: rgba(203,90,90,1); } .btn-decline:active { background: rgba(141,62,62,1); box-shadow: inset 0 0 3px rgba(0,0,0,0.5); } .icon-arrow { width: 19px; height: 15px; background-position: 0 0; } .icon-x { width: 15px; height: 15px; background-position: -19px 0; } .jfk-bubble-arrow { position: absolute; top: 20px; } .jfk-bubble-arrow:before, .jfk-bubble-arrow:after { content: ""; position: absolute; height: 0; width: 0; } .jfk-bubble-arrow:before { border: 9px solid; border-color: transparent #bbb; top: -9px; } .jfk-bubble-arrow:after { border: 8px solid; border-color: transparent #fff; top: -8px; } .jfk-bubble-arrowright { right: 0; } .jfk-bubble-arrowright:before, .jfk-bubble-arrowright:after { border-right-width: 0; } .f-notification { position: fixed; bottom: 10px; right: 110px; text-align: left; width: 300px; min-height: 20px; padding: 20px 40px 20px 18px; border-radius: 5px; color: rgba(255, 255, 255, 0.85); } .f-notification:hover { opacity: 0.9; } .f-notification:hover .f-notification-close { background: rgba(77, 77, 79, 0.1); } .f-notification .f-notification-title { font-weight: 600; color: #4D4D4F; cursor: default; } .f-notification .f-close { position: absolute; right: 15px; top: 20px; height: 20px; width: 20px; line-height: 18px; vertical-align: middle; text-align: center; border-radius: 20px; color: #4D4D4F; cursor: pointer; background: rgba(255, 255, 255, 0.25); } .f-notification .f-close:hover { background: rgba(77, 77, 79, 0.2); } .f-notification-success { background: #2ecc71; } .f-notification-error { background: #e74c3c; } .f-notification-alert { background: #5177a4 } .f-show { animation-name: animSlideElastic; animation-duration: 1s; animation-timing-function: linear; } .f-hide { animation-name: animSlideElastic; animation-duration: 0.5s; animation-direction: reverse; } @keyframes animSlideElastic { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1); } 3.333333% { transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1); } 6.666667% { transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1); } 10% { transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1); } 13.333333% { transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1); } 16.666667% { transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1); } 20% { transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1); } 23.333333% { transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1); } 26.666667% { transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1); } 30% { transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1); } 33.333333% { transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1); } 36.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1); } 40% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1); } 43.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1); } 46.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1); } 50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1); } 53.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1); } 56.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1); } 60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1); } 63.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1); } 66.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1); } 70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1); } 73.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1); } 76.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1); } 80% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1); } 83.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1); } 86.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1); } 90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1); } 93.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1); } 96.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } .spotlight-users{ position:relative;width:100%;height:auto;margin-top:20px; } .spotlight-users .add-me-here{ width:100%;background:#DFDFDF;height:30px;border-radius:4px;text-align:left;padding-left:5px;line-height:30px;font-size:12px;margin-bottom:15px; } .spotlight-users .add-me-here-down{ position:absolute;left:8px;top:4px;color:#DFDFDF;height:40px;background:none;font-size:40px; } .spotlight-users .user-in{ position:relative; display: inline-block; float:left; margin-right:3px; width: 58px; height: 58px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1) !important; transform: scale(0.95); transition:all .5s; } .spotlight-users .user-in:hover { transform: scale(1); box-shadow: 0 37.125px 70px -12.125px rgba(0,0,0,0.2); } .spotlight-users .user-in .online{ position:absolute; top:3px; right:-2px; width:20px; height:20px; font-size: 25px; border-radius:50px; background:#2acf2a; border: 2px solid #e8e8e8; } .onlineFriendRight{ position:absolute; top:3px; right:-7px; width:14px; height:14px; border-radius:50%; background:#2acf2a; border: 2px solid #fff; } .spotlight-users .current-in{ display: inline-block; float:left; margin-right:3px; width: 54px; height: 54px; border-radius: 50px; background-size: cover; background-repeat: no-repeat; background-position: top center; cursor: pointer; } .spotlight-users .current-in .photo{ width: 55px; height: 55px; border-radius: 50px; border: 3px solid #fe7902; background:rgba(0,0,0,.3); z-index:1; } .slider-profile { position:absolute; z-index:9999999999 !important; bottom:0; background:#fff; -webkit-transition:-webkit-transform .3s ease; -moz-transition: -moz-transform .3s ease; -ms-transition: -ms-transform .3s ease; transition: transform .3s ease; } .opened { -webkit-transform: translate(0, 0%); -moz-transform: translate(0, 0%); -ms-transform: translate(0, 0%); transform: translate(0, 0%); -moz-animation: bounce .2s 0.26s; -webkit-animation: bounce .2s 0.26s; animation: bounce .2s 0.26s; } .closed { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); -moz-animation: bounce .2s 0.26s; -webkit-animation: bounce .2s 0.26s; animation: bounce .2s 0.26s; } @-moz-keyframes bounce { 10% { -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes bounce { 10% { -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes bounce { 10% { -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .animated-fast { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -ms-animation-duration: .4s; -o-animation-duration: .4s; animation-duration: .4s; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.8); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.8); } 50% { opacity: 1; -moz-transform: scale(1.05); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.8); } 50% { opacity: 1; -o-transform: scale(1.05); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .animated .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .delay { -webkit-animation-delay: 0.30s; -moz-animation-delay: 0.30s; -o-animation-delay: 0.30s; animation-delay: 0.30s; } .delay-three { -webkit-animation-delay: 0.60s; -moz-animation-delay: 0.60s; -o-animation-delay: 0.60s; animation-delay: 0.60s; } .delay-two { -webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s; } .delay-one { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name:fadeInRight; animation-name: fadeInRight; } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .animated.fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } .animated.fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .ui-slider-horizontal { height: 6px; background: #E0E0E0 !important; border: 1px solid #dadada !important; clear: both; margin: 8px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .ui-slider { position: relative; text-align: left; } .ui-slider-horizontal .ui-slider-range { top: -1px; height: 100%; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; height: 8px; font-size: .7em; display: block; border: 1px solid #2B65F8; box-shadow: 0 1px 0 #2B65F8 inset; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; background: #2B65F8; } .ui-slider .ui-slider-handle { border-radius: 50%; background: #2B65F8; width: 22px; height: 22px; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 22px; height: 22px; cursor: default; border: none; cursor: pointer; outline:none; } .ui-slider .ui-slider-handle:after { content:""; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; background: #fff; } .ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; } .ui-slider a:focus { outline:none; } #slider-range { position:relative; width: 65% !important; padding-left:7.5%; top:-7px; display:inline-table !important; } #slider-range2 { position:relative; width: 85% !important; top:-7px; } #slider-range-age1 { position:relative; width: 10% !important; display:inline-table !important; font-family:'Montserrat'; font-size:13px; color:#404040; text-align:left; } #slider-range-age2 { position:relative; width: 10% !important; display:inline-table !important; font-family:'Montserrat'; font-size:13px; color:#404040; text-align:right; } .verify-icon { position: relative; display: inline-block } .verify-icon__text { font-size: .7171em; line-height: 1.1234em; color: #1eb2fc } .page-profile .page-right-side, .page-mm .page-right-side { overflow: hidden } .section--profile { margin: 0 -40px; padding: 25px 40px } .section--profile:before { content: ''; position: absolute; right: 40px; bottom: 0; left: 40px; } .profile-info-v2__left > div:last-child > .section--profile:before { display: none } .section--profile.active { padding-bottom: 0 } .section--profile .form-label { width: 30% } .profile-friends { margin: 0 0 -15px; width: 560px } .profile-friends .brick-wrap { vertical-align: top; margin: 0 17px 15px 0 } .profile-friend__txt { margin: 0 0 15px; width: 520px } .brick-wrap:nth-child(2) + .profile-friend__txt { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; width: 215px; height: 100px } .brick-wrap:nth-child(2) + .profile-friend__txt .profile-friend__txt-descr { width: 215px } .profile-friends .brick + .brick { margin-left: -83px; box-shadow: 0 0 0 3px #fff } .friend-connected__first, .friend-connected__second, .friend-connected__third { display: none } .first .friend-connected__first, .second .friend-connected__second, .third .friend-connected__third { display: block } .profile-friends .brick-wrap.loading > .brick:after, .profile-friends .brick-wrap.loading .brick--hover:after { background: #d6d6d6 } .profile-friends .brick-wrap .loader { z-index: 1 } .profile-friends .brick > .icon { opacity: 1 } .profile-friends .brick.brick--covered:after { background: rgba(255, 255, 255, .6) } .profile-friends .brick-wrap--double { margin-right: 12px; margin-left: -5px } .loading > .profile-friends__more-link { display: none } .profile-section__txt { display: inline-block; margin: 0; max-width: 100%; white-space: pre-wrap; word-wrap: break-word } .profile-section__more-txt { position: relative; top: 2px; margin: 0 0 0 7px; cursor: pointer } .profile-section__txt-hide, .profile-section__txt-active .profile-section__more-txt { display: none } .profile-section__txt-active .profile-section__txt-hide { display: inline } .profile-section__txt + .btn { margin-top: 15px } .profile-edit__btn-right { margin-top: 10px; text-align: right } .section--profile .checkbox--radio { margin: 5px 12px 5px 0 } .section--profile .checkbox--radio:last-child { margin-right: 0 } .profile-photo-grid { position: absolute; z-index: 2; top: 110px; visibility: hidden; width: 100%; background: #fff; -webkit-transform: translate(0, 1000px); transform: translate(0, 1000px); transition: visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045); transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear; transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045) } .profile-grid-visible { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .profile-grid-visible .profile-photo-grid { visibility: visible; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1), -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1) } .profile-grid-visible-end .profile-photo-grid { position: relative; top: 0 } .profile-info { position: relative } .profile-grid-visible-end .profile-info { position: absolute; top: 110px } .profile { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 100% } .profile__header { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .profile__content { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 100% } .profile:nth-child(2) > .profile__header { position: absolute; top: 0; right: 0; left: 0; background: #fff } .profile:nth-child(2) > .profile__content { position: absolute; z-index: 2; visibility: hidden; margin: 110px 0 0; background: #fff; -webkit-transform: translate(0, 1000px); transform: translate(0, 1000px) } .profile-switching-up { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .profile-switching-up .profile:first-child { position: absolute; top: 0 } .profile-switching-up .profile:nth-child(2) > .profile__content { position: relative; visibility: visible; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1), -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1) } .profile-switching-down .profile:first-child > .profile__header { display: none } .profile-switching-down .profile:first-child > .profile__content { position: absolute; z-index: 3; visibility: hidden; margin: 110px 0 0; background: #fff; -webkit-transform: translate(0, 1000px); transform: translate(0, 1000px); transition: visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045); transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear; transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045) } .profile-switching-down .profile:nth-child(2) > .profile__content { position: relative; visibility: visible; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: none } .profile__grid { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .profile__upload { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .profile-info-v2 { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .profile-info-v2__left { position: relative; width: 65%; padding: 0 40px 100vh; background: #fff } .profile-info-v2__right { position: relative; border-left: 1px solid rgba(0, 0, 0, .15); width: 35%; padding: 0 30px 100vh; background: #f7f7f7 } .profile-gallery { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .profile-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 110px } .profile-header__btn { position: relative; z-index: 3; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .profile-header__txt { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; padding: 0 20px 0 0 } .profile-header__btn + .profile-header__txt { padding-left: 27px } .name-wrap { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .name-wrap .online-status { position: absolute; top: 50%; left: -14px; margin: -4px 0 0 } .profile-header__name { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; margin: 0; padding: 0 0 0 1px; font-size: 1.571em; line-height: 1.182; white-space: nowrap; transition: color .15s } .profile-header__name:hover { color: #2b65f8 } .profile-header__age { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .profile-header__icons { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 0 0 10px } .profile-header__icons .icon { margin: 0 5px 0 0 } .profile-header__icons > .icon:only-child { display: block } .verified-text { vertical-align: middle; display: inline-block; font-size: .7171em; line-height: 1.1234em; color: #07b3fe } .common-info-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 0 0 -13px } .common-info-wrap_ { position: relative; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 -2px } .common-info-wrap_:empty { display: none } .common-info { position: relative; vertical-align: top; display: inline-block; margin: 7px 0 0; height: 32px; padding: 0 12px 0 15px } .common-info-wrap--hide .common-info:first-child:after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAIBAMAAADD3ygIAAAAFVBMVEUAAAD///////////////////////9Iz20EAAAABnRSTlMAkAGNSUZQ9d/eAAAAIUlEQVQI12NgZWBgcDNgYFBMVGBgEhNgYDATALFBYiA5ACreAqmmyyZYAAAAAElFTkSuQmCC); position: absolute; top: 9px; right: -3px; border-radius: 7px 0 0 7px; width: 7px; height: 14px; padding: 0 0 0 4px; background: #256cf5; line-height: .858; transition: opacity .2s ease-in-out } .common-info-wrap--hide > .common-info-wrap_:hover > .common-info:first-child:after { opacity: 0 } .common-info:before { content: ''; position: absolute; top: 4px; right: -4px; border-right: 1px solid rgba(0, 0, 0, .15); height: 24px } .common-info-wrap .common-info:last-child:before { border-right: 0 } .common-info-wrap--hide .common-info--hide { position: absolute; opacity: 0; visibility: hidden; margin-left: -10px; padding: 0 12px 0 15px; transition: all .25s ease-in-out } .common-info-wrap--hide > .common-info-wrap_ > .common-info--hide + .common-info--hide { left: 200%; transition: all .1s linear } .common-info-wrap--hide > .common-info-wrap_:hover > .common-info--hide { position: relative; left: auto; opacity: 1; visibility: visible; margin-left: 0 } .common-info--work-education { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex: 1 1 150px; -ms-flex: 1 1 150px; flex: 1 1 150px; overflow: hidden; max-width: 380px; padding-right: 0; font: .857em/1.334 Helvetica, Arial, sans-serif } .common-info-wrap--hide > .common-info--work-education { opacity: 1; visibility: visible; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; transition: all .25s ease-in-out .15s } .common-info-wrap--hide > .common-info-wrap_:hover + .common-info--work-education { opacity: 0; visibility: hidden; transition: all 0s ease-in-out 0s } .common-info--work-education:before { content: ''; position: absolute; top: 4px; right: auto; left: 0; border-left: 1px solid rgba(0, 0, 0, .15); height: 24px } .common-info-wrap--hide > .common-info--work-education:before { border: 0; width: 0 } .common-info-wrap_:empty + .common-info:before { border: 0 } .work-education-link { border-bottom: 1px solid transparent; color: #2b65f8; transition: border-color .2s } .work-education-link:hover { border-color: #2b65f8 } .common-info > span { display: inline-block; font: .857em/1.334 Helvetica, Arial, sans-serif } .common-info > .icon { margin: 0 7px 0 0 } .common-info__count { position: relative; display: inline-block; margin: 0 3px 0 0; min-width: 18px; min-height: 24px; font-size: 2.286em; line-height: 1 } .common-info__count-cnt { position: relative; display: inline-block; width: 100%; background: #fff } .profile-menu__chat-btn { padding: 10px 22px 13px 18px } .profile-menu__chat-btn > .btn-txt { font-size: .889em } .big-photo { position: relative; z-index: 2; width: 100%; height: calc(100vh - 110px - 25px); min-height: 555px } .mm_profile_visible_end .big-photo { position: absolute } .big-photo__gallery { position: relative; z-index: 2; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100% } .big-photo__footer { position: relative; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100% } .big-photo__footer .banner { background: #fff } .big-photo__footer .table-cell { height: 90px } .big-photo__footer .table-cell:first-child { padding-left: 30px } .big-photo__footer .table-cell + .table-cell { padding-right: 30px; text-align: right } .big-photo__footer .photo-coaching { margin: 13px 0 } .big-photo__footer .photo-coaching__label { width: 400px; line-height: 1.286em } .photo-coaching + .photo-coaching__label { margin-left: 10px; width: 300px } .big-photo__footer .private-photo { margin: 13px 0; height: 16px } .big-photo__footer .private-photo__label { width: 400px; line-height: 1.286em } .private-photo + .private-photo__label { margin-left: 10px; width: 300px } .game-profile { position: absolute; z-index: 2; top: 110px; visibility: hidden; width: 100%; -webkit-transform: translate(0, 1000px); transform: translate(0, 1000px); transition: visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045); transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear; transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045) } .mm_profile_visible .game-profile { visibility: visible; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1), -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1) } .mm_profile_visible_end .game-profile { position: relative; top: 0 } .mm_no_profile .profile-menu, .mm_no_profile .user-status, .mm_no_profile .app[rel='profile-view'], .mm_no_profile .name-wrap .b-link { display: none } .mm_no_profile .profile-header__name { padding-right: 0 } .mm_no_profile .profile-header__name:hover { color: #4d4d4d } .gallery-blocker { z-index: 2; display: none } .gallery-blocker-v2 { z-index: 2 } .mm_gallery_locked .gallery-blocker { display: block } .profile-widget { position: relative; padding: 25px 0 } .profile-widget:empty { border: 0; padding: 0 } .profile-widget__expand { position: absolute; top: 32px; right: 0; width: 80px; line-height: 1; text-align: right } .profile-widget__expand + h2 { width: 160px } .profile-widget__expand-lnk--show, .hide .profile-widget__expand-lnk--hide { display: none } .hide .profile-widget__expand-lnk--show { display: inline } .loading > .profile-widget__expand-lnk { opacity: 0 } .hide .profile-widget__items > .profile-widget__item:nth-child(n+4), .hide .profile-widget__verify .verification-methods__item:nth-child(n+4) { display: none } .profile-widget__popularity-status--low, .profile-widget__popularity-status--low:hover { color: #f02139 } .profile-widget__popularity-status--average, .profile-widget__popularity-status--average:hover { color: #cf9200 } .profile-widget__popularity-status--high, .profile-widget__popularity-status--high:hover { color: #2bc43f } .profile-widget__txt { margin-bottom: 10px } .profile-widget__verify { padding: 5px 0 0 } .profile-widget__btn { margin: 15px 0 0 } .photo-gallery { position: absolute; top: 0; bottom: 0; width: 100%; background: #2d3238; transition: width .3s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .photo-gallery:before { content: ''; position: absolute; z-index: 2; top: 0; right: 0; bottom: -90px; left: 0; visibility: hidden; background: rgba(0, 0, 0, 0); transition: background .1s linear .2s, visibility 0s linear .3s } .mm_profile_visible .photo-gallery:before { visibility: visible; background: rgba(0, 0, 0, .3); transition: background .1s linear } .photo-gallery__photo, .photo-gallery__photo > img, .photo-gallery__photo > video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; max-width: 100%; height: auto; max-height: 100% } .photo-gallery__photo { overflow: hidden } .photo-gallery__photo > img { opacity: 0; -webkit-animation: show .2s ease-in-out forwards; animation: show .2s ease-in-out forwards } .photo-gallery__photo > video { z-index: 1; display: none; opacity: 0; -webkit-animation: show .2s ease-in-out forwards; animation: show .2s ease-in-out forwards } .photo-gallery__video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; text-align: center } .photo-gallery__video > .inline { position: relative; z-index: 2 } .photo-gallery__video .icon > .b-link { top: -120px; right: -120px; bottom: -120px; left: -120px } .mm_video .photo-gallery__video { display: block } .mm_video_playback .photo-gallery__photo > img { display: none } .mm_video_playback .photo-gallery__photo > video { display: block } .mm_video_pause .photo-gallery__video { display: block } .mm_video_pause .photo-gallery__photo > img { display: none } .mm_video_pause .photo-gallery__photo > video { display: block } .photo-gallery__blocker { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .photo-gallery__blocker_ { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; padding: 0 160px; background: rgba(255, 255, 255, .9); text-align: center } .photo-gallery__blocker_--blue, .photo-gallery__blocker_--gift { background: rgba(37, 108, 245, .8); color: #fff } .photo-gallery__blocker-icon-sm { margin: 0 0 15px } .photo-gallery__blocker-icon { margin: 0 0 25px } .photo-gallery__blocker p + p { margin-top: -10px } .photo-gallery__blocker-options { margin: 20px 0 0 } .mm_private_photos .photo-gallery__abuse, .mm_facebook_photos .photo-gallery__abuse, .mm_instagram_photos .photo-gallery__abuse, .mm_not_moderated_photo .photo-gallery__abuse { display: none } .mm_private_photos .private-photos, .mm_facebook_photos .facebook-photos, .mm_instagram_photos .instagram-photos, .mm_gift_screen .photo-gallery__blocker_--gift, .mm_not_moderated_photo .not-moderated-photos { z-index: 1; opacity: 1 } .mm_private_photos .photo-gallery__arrow, .mm_facebook_photos .photo-gallery__arrow, .mm_instagram_photos .photo-gallery__arrow, .mm_not_moderated_photo .photo-gallery__arrow { fill: #000 } .mm_private_photos .photo-gallery__link--next, .mm_facebook_photos .photo-gallery__link--next, .mm_instagram_photos .photo-gallery__link--next, .mm_not_moderated_photo .photo-gallery__link--next, .mm_gift_screen .photo-gallery__link--next { left: 90% } .mm_gift_screen .photo-gallery__abuse, .mm_gift_screen .photo-gallery__video-button, .mm_gift_screen .photo-gallery__corner { display: none } .photo-gallery__abuse { position: absolute; z-index: 1; right: 30px; bottom: 25px } .photo-gallery__link { position: absolute; z-index: 1; top: 0; bottom: 0; display: none; cursor: pointer; -webkit-transform: translateZ(0); transform: translateZ(0) } .photo-gallery__link--prev { right: 810px; left: 0; -webkit-transform: translateZ(0); transform: translateZ(0) } .photo-gallery__link--next { right: 0; left: 90px; -webkit-transform: translateZ(0); transform: translateZ(0) } .mm_has_gallery .photo-gallery__link { display: block } .photo-gallery__arrow { position: absolute; top: 50%; opacity: .2; margin: -20px 0 0; width: 15px; height: 40px; -webkit-transform: translateZ(0); transform: translateZ(0); transition: opacity .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; pointer-events: none } .photo-gallery__arrow--left { left: 40px } .photo-gallery__arrow--right { right: 40px } .photo-gallery__link:hover > .photo-gallery__arrow { opacity: 1; -webkit-transform: scaleY(.7) translateZ(0); transform: scaleY(.7) translateZ(0) } .photo-gallery__corner { position: absolute; z-index: 1; bottom: 0; left: 72px; padding: 30px 60px 30px 0 } .photo-gallery__corner_ { position: relative; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15); border-radius: 16px; background: rgba(0, 0, 0, .5); font-family: 'FS Albert Pro Web Bold', Helvetica, Arial, sans-serif; transition: border-radius .15s .25s } .photo-gallery__video-button { position: absolute; z-index: 1; bottom: 25px; left: 30px } .photo-gallery__video-button.hidden + .photo-gallery__corner { left: 0; padding: 30px 60px 30px 30px } .photo-gallery__counter { margin: 0 15px; height: 32px; text-align: center; color: #fff; white-space: nowrap; transition: margin .15s .25s, opacity .15s .25s } .photo-gallery__counter .icon { margin: 0 0 -3px } .photo-gallery__miniatures-wrap { overflow: hidden; transition: width .15s .25s, height .15s .25s } .photo-gallery__miniatures { position: relative; display: inline-block; font-size: 0; white-space: nowrap } .photo-gallery__photos-wrap { vertical-align: middle; display: inline-block; overflow: hidden; max-width: 270px } .photo-gallery__photos { position: relative } .photo-gallery__photos.animated { transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } .photo-gallery__photos-item { position: relative; display: inline-block; overflow: hidden; margin: 6px 3px; width: 48px; height: 48px } .photo-gallery__photos-item:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .5; background: rgba(0, 0, 0, 1); transition: opacity .15s } .photo-gallery__photos-item:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .1; border: 1px solid #fff; transition: opacity .15s } .photo-gallery__photos-item:hover:before, .photo-gallery__miniatures-wrap:hover .photo-gallery__photos-item.active:before { opacity: 0 } .photo-gallery__photos-item:hover:after { opacity: .05 } .photo-gallery__miniatures-wrap:hover .photo-gallery__photos-item.active .b-link { display: none } .photo-gallery__photos-item > img { width: 48px; height: 48px } .photo-gallery__photos-item > .icon { position: absolute; bottom: 3px; left: 1px } .photo-gallery__photos-stub { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-weight: 400; font-size: 14px; text-align: center; color: #fff } .mm_show_not_moderated_photos .photo-gallery__photos-item--not-moderated .photo-gallery__photos-stub { display: none } .mm_show_not_moderated_photos .photo-gallery__photos-item--not-moderated > img { -webkit-filter: none; filter: none } .photo-gallery__photos-item--private > img, .photo-gallery__photos-item--not-moderated > img { -webkit-filter: blur(5px); filter: blur(5px) } .blured{ -webkit-filter: blur(5px) !important; filter: blur(5px) !important; } .photo-gallery__prev-page, .photo-gallery__next-page { position: relative; vertical-align: middle; display: inline-block; opacity: .7; overflow: hidden; margin: 6px 0; width: 0; transition: opacity .15s } .photo-gallery__prev-page { margin-right: 3px } .photo-gallery__next-page { margin-left: 3px } .photo-gallery__prev-page .icon, .photo-gallery__next-page .icon { display: block; margin: 16px 0 } .photo-gallery__prev-page:hover, .photo-gallery__next-page:hover { opacity: 1 } .gallery_has_arrows .photo-gallery__prev-page { margin-left: 6px; width: auto } .gallery_has_arrows .photo-gallery__next-page { margin-right: 6px; width: auto } .mm_has_gallery .photo-gallery__corner:hover .photo-gallery__corner_ { border-radius: 6px; background: rgba(0, 0, 0, .7); transition-delay: 0 } .photo-gallery__counter.move { opacity: 0; margin-bottom: -32px; transition-delay: 0 } .mm_has_gallery .photo-gallery__corner:hover .photo-gallery__miniatures-wrap { transition-delay: 0; will-change: width, height } .score-user__txt { margin: 0 0 0 17px; width: 145px } .score-user__txt b { white-space: nowrap } .score-user__txt--top { vertical-align: top } .score-user__btns { margin: 10px 0 0 } .verification-methods__item { position: relative } .verification-methods__item:not(:last-child) { margin: 0 0 20px } .verification-methods__item:hover .verification-methods__title { color: #4d4d4d } .verification-methods__item:hover .verification-methods__message--action { border-color: #2b65f8; color: #2b65f8 } .verification-methods__item:hover .verification-methods__icon--arrow { color: #2b65f8 } .verification-methods__item.is-blocked { pointer-events: none } .verification-methods__item--photo-verify + .verification-methods__item { margin-top: 30px } .verification-methods__item--photo-verify::after { content: '+'; position: absolute; bottom: -26px; left: 0; width: 32px; font-size: 24px; line-height: 1.167; text-align: center; color: #999; pointer-events: none } .verification-methods__item--linked .verification-methods__title { color: #4d4d4d } .verification-methods__item-inner { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .verification-methods__logo { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .verification-methods__logo > .icon { vertical-align: top } .verification-methods__logo--google + .verification-methods__txt .verification-methods__title { direction: ltr; unicode-bidi: embed } .verification-methods__txt { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 10px; max-width: 155px; line-height: 1.143 } .verification-methods__title { font-size: 1em; color: #999 } .verification-methods__message { vertical-align: top; display: inline-block; overflow: hidden; margin: 1px 0 0; max-width: 100%; color: #bfbfbf; white-space: nowrap; text-overflow: ellipsis } .verification-methods__message--action { border-bottom: 1px solid rgba(77, 77, 77, 0.3); cursor: pointer; color: #4d4d4d; transition: color .2s, border-color .2s } .verification-methods__icon { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .verification-methods__icon--arrow { color: #bfbfbf } .verification-methods--line { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex } .verification-methods--line .verification-methods__item { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; width: 100px; padding: 0 5px } .verification-methods--line .verification-methods__item--plus { margin: 0; width: 30px; height: 60px; line-height: 60px } .verification-methods--line .verification-methods__item--photo-verify { margin-right: 10px; margin-bottom: 0 } .verification-methods--line .verification-methods__item--photo-verify::after { top: 0; right: -15px; left: auto; width: 20px; height: 64px; line-height: 64px } .verification-methods--line .verification-methods__item-inner { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .verification-methods--line .verification-methods__txt { display: block; margin: 10px 0 0 } .verification-methods--box { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .verification-methods--box .verification-methods__item { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 15px; width: 100px; padding: 0 5px } .verification-methods--box .verification-methods__item--plus { margin: 0; width: 30px; height: 60px; line-height: 60px } .verification-methods--box .verification-methods__item--photo-verify::after { top: 0; right: -10px; left: auto; width: 20px; height: 64px; line-height: 64px } .verification-methods--box .verification-methods__item-inner { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .verification-methods--box .verification-methods__txt { display: block; margin: 10px 0 3px 0 } .verification-methods--digest .verification-methods__item:not(:last-child) { margin-bottom: 10px } .social-network-settings { position: relative; margin: 0 -30px } .social-network-settings_ { position: relative; margin: 15px 0 0; border-top: 1px solid rgba(0, 0, 0, .15); border-bottom: 1px solid rgba(0, 0, 0, .15); padding: 15px 30px; background: #eee } .social-network-settings_::before { content: ''; position: absolute; z-index: 1; top: -5px; right: 42px; opacity: 1; margin: 0 0 0 -3px; border: 1px solid; border-color: rgba(0, 0, 0, .15) transparent transparent rgba(0, 0, 0, .15); width: 6px; height: 6px; background: #eee; cursor: default; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: opacity .2s linear } .social-network-settings__radio { margin: -5px 0 10px } .entry-points { margin: -5px 0 -1.3572em; text-align: justify } .entry-points:after { content: ''; display: inline-block; width: 100%; font-size: 0 } .entry-point { position: relative; display: inline-block; text-align: center } .entry-point:hover b { color: #2b65f8; transition: color .2s } .entry-point__icon { margin: 0 0 -3px; height: 60px } .entry-point--off > .entry-point__icon { opacity: .4; transition: opacity .2s } .entry-point--off:hover > .entry-point__icon { opacity: 1 } .entry-point__icon > .icon { margin: 5px; width: 50px; height: 50px } .entry-point__mark { display: inline-block; margin: 0 3px 1px 0 } .location-map { position: relative; overflow: hidden; margin: 15px 0 0; border-radius: 3px; height: 240px; transition: all .2s linear } .hide .location-map { opacity: 0; margin: 0; height: 0 } .location-map--static { margin: 5px 0 0; height: 160px; text-align: center } .location-map--static:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(77, 77, 77, .1); border-radius: 3px } .location-map__real { border: 1px solid rgba(77, 77, 77, .2) } .location-map__cached, .location-map__real { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 3px; width: 100%; height: 100% } .location-map__cached > img { position: absolute; top: -500px; right: 0; bottom: -500px; left: 0; margin: auto; width: 100%; height: auto } .location-map__layer { position: relative; vertical-align: middle; display: inline-block; border-radius: 4px; width: 256px; padding: 15px; background: rgba(255, 255, 255, .9) } .location-map__btn { margin: 5px 0 0 } .location-map__radius { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border: 1px solid rgba(31, 114, 242, .35); border-radius: 50%; width: 150px; height: 150px; background: rgba(43, 101, 248, .1) } .location-map__radius--sm { width: 120px; height: 120px } .location-map__radius--bumped { border-color: rgba(153, 69, 230, 0.5); background: rgba(153, 69, 230, 0.1) } .location-map__pin { position: absolute; top: 10px; right: 0; bottom: 0; left: 0; margin: auto; width: 48px; height: 48px } .location-map__pin > .icon { margin: -6px 0 0 -6px } .map-tooltip { display: inline-block; margin: -35px 0 0 -13px; width: 26px; height: 60px } .here-maps .map-tooltip {} .google-maps .map-tooltip {} .here-maps .tooltip.active {} .map-canvas { z-index: 1; width: 100%; height: 100% } .here-maps.map-canvas {} .map-zoom { position: absolute; z-index: 2; top: 10px; left: 10px } .map-zoom__slider { position: relative; margin: 20px 0; width: 20px; height: 127px; background: url() 0 -23px no-repeat; cursor: pointer } .map-zoom__in, .map-zoom__out { position: absolute; top: -23px; left: 0; width: 20px; height: 23px; background: url() 0 0 no-repeat } .map-zoom__out { top: 100%; background-position: 0 -295px } .map-zoom__dash { position: absolute; top: 3px; left: 1px; width: 20px; height: 118px } .map-zoom__dash-it { position: absolute; left: 7px; border-top: 1px solid #aaa; width: 2px; height: 1px } .map-zoom__scale { position: relative; top: -2px; width: 18px; height: 130px } .map-zoom__scale-me { position: relative; left: 1px; display: inline-block; width: 18px; height: 12px; background: url() 0 -318px no-repeat } .profile-questions__counters { margin: 0 0 8px } .profile-questions__counter { position: relative; vertical-align: middle; display: inline-block } .profile-questions__counter:hover { opacity: .8 } .profile-questions__counter-number { vertical-align: middle; display: inline-block; font-size: 2.286em } .profile-questions__counter-txt { vertical-align: middle; display: inline-block; margin: 0 0 0 5px; width: 68px; font-size: .8571em; line-height: 1.3334 } .profile-questions__action { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .profile-questions__action-icon { -webkit-flex: none; -ms-flex: none; flex: none } .profile-questions__action-message { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-left: 10px } .profile-questions__action-message:only-child { margin-left: 0 } .profile-questions__action-message + .profile-questions__action-btn { margin-left: 10px } .profile-questions__action-btn { -webkit-flex: none; -ms-flex: none; flex: none } .banner-container { vertical-align: top; display: inline-block; opacity: 1; visibility: visible; transition: height .6s, opacity .2s .4s, visibility .2s .4s } .banner-container:empty { display: none } .banner-container.animated { opacity: 0; visibility: hidden; transition: height .6s, opacity .2s, visibility .2s } .banner-container--wide { display: block; margin: 20px 30px 0 } .banner-container--wide .banner-buttons { min-width: 195px } .section-header--folder ~ .banner-container--wide { margin-top: 0 } .section-header-fixed ~ .banner-container--wide { margin-top: 100px } .banner-card { position: relative; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 7px #262b37; width: 64px; height: 78px } .banner-card__img { overflow: hidden; width: 100%; height: 100%; -webkit-backface-visibility: hidden } .banner-card__img > img { margin: 0 0 0 -7px; width: 78px; height: 78px } .banner-cards { position: relative } .banner-cards .brick { position: absolute; box-shadow: 0 0 0 2px #fff } .banner-balloons { position: relative; overflow: hidden; margin: 0 0 0 -30px; width: 205px; height: 100px } .banner-balloon { position: absolute; border-radius: 50%; font-size: .857em; text-align: center; color: #fff } .banner-balloon__txt { display: block; font-size: 2.833em; line-height: 1.236em } .banner-balloon__txt-small { display: inline-block; width: 60px } .banner-balloon--red { top: 19px; left: 10px; width: 88px; height: 88px; padding: 11px 0 0; background: linear-gradient(rgba(255, 99, 170, .9), rgba(255, 49, 49, .9)) } .banner-balloon--blue { bottom: 16px; left: 60px; width: 138px; height: 138px; padding: 52px 0 0; background: linear-gradient(#02b8f3, #2b65f8) } .banner-balloon--red .banner-balloon__txt:after { content: '='; position: absolute; top: 1px; right: 2px } .promo-banner { position: relative; margin: 5px 0; border-radius: 5px; width: 190px; padding: 20px; text-align: center } .promo-banner::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 5px; transition: box-shadow .2s ease-in-out } .promo-banner:hover::after { box-shadow: 0 2px 3px rgba(0, 0, 0, .1) } .promo-banner__title { font-size: 1.143em; line-height: 1.125 } .promo-banner__user { position: relative; display: inline-block; margin: 0 0 25px } .promo-banner .btn { position: static; display: block } .promo-banner__txt { margin: 0 0 25px; max-width: 148px; word-wrap: break-word } .promo-banner__txt b { font-weight: 700 } .promo-banner .brick + .brick { margin-left: 0 } .promo-banner .brick-group--promo > .brick + .brick { margin-left: -15px } .promo-banner .bricks-line--sm > .brick + .brick { margin-left: -5px } .promo-banner .brick-group { margin: 0 -20px } .promo-banner .brick > .brick { box-shadow: 0 0 0 2px #fff } .promo-banner__cost { margin: 10px 0 -10px; font-size: .8571em; line-height: 1.3334; text-align: center; color: #bfbfbf } .promo-banner--liked-you .promo-banner__user { margin-right: -21px; margin-left: -21px } .promo-banner__user--popularity { padding-bottom: 43px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAsAgMAAAC4URiwAAAADFBMVEUAAAAAol4Aol4Aol6fvFNyAAAAA3RSTlMAw8SGqEb6AAAAS0lEQVQokWNgQAKMDsg8BuYDDAGo3A/YuBBdcC6QQR6XFZXLTww3AJX7gTpcxgYULggQ4gK1IHMhBN24bKhchoHlJqByGQhzE1B4ADn2Wx97IPCVAAAAAElFTkSuQmCC') no-repeat 50% 100% } .promo-banner--mobile .promo-banner__btns { margin: 0 -10px } .promo-banner--mobile .promo-banner__btns .btn { position: relative; overflow: hidden; margin-left: 0 } .promo-banner--encounters2 .promo-banner__user > .brick:first-child, .promo-banner--add-photos .promo-banner__user > .brick:first-child { z-index: 1 } .promo-banner--encounters2 .brick + .brick, .promo-banner--add-photos .brick + .brick { position: absolute; top: 0; left: -50px } .promo-banner--encounters2 .brick:nth-child(3), .promo-banner--add-photos .brick:nth-child(3) { right: -50px; left: auto } .promo-banner--inbox-full .banner-card:nth-child(2) { z-index: 1 } .promo-banner--inbox-full .banner-card:first-child { position: absolute; top: 10px; left: -48px; -webkit-transform: rotate(-9deg); transform: rotate(-9deg) } .promo-banner--inbox-full .banner-card:last-child { position: absolute; top: 10px; right: -48px; -webkit-transform: rotate(9deg); transform: rotate(9deg) } .promo-banner--inbox-full .banner-cards .brick { bottom: -5px } .promo-banner--favourite .brick + .brick, .promo-banner--spotlight .brick + .brick, .promo-banner--first-contact .brick + .brick { left: -40px } .promo-banner--favourite .brick + .brick:nth-child(3), .promo-banner--spotlight .brick + .brick:nth-child(3), .promo-banner--first-contact .brick + .brick:nth-child(3) { right: -40px; left: auto } .promo-banner--boost .promo-banner__imgs { position: relative; overflow: hidden; margin: -19px -19px 10px -19px; border-radius: 5px 5px 0 0 } .promo-banner--boost .promo-banner__imgs img { margin: 0 0 2px 0; width: 93px; height: 93px } .promo-banner--boost .promo-banner__imgs img:nth-child(2n-1) { margin-right: 2px } .promo-banner--boost .brick { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .promo-banner--bundle .brick--xlg { width: 80px; height: 80px } .banner { position: relative; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 6px; width: 100%; height: 100px; padding: 0 30px -webkit-box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.12); } .banner--profile { border-top: 1px solid rgba(26, 36, 57, .15) } .banner-promo, .banner-buttons { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .banner-buttons { padding-left: 15px; text-align: right } .banner-content { z-index: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto } .banner-text { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; margin: 0 20px; min-width: 200px; max-width: 365px } .banner .brick > .brick { box-shadow: 0 0 0 2px #fff } .banner .brick-group { width: 175px } .banner .banner-promo .brick:only-child { margin-right: 23px } .banner .banner-promo .brick:only-child > .brick { right: -10px } .banner--encounters { background: rgba(0, 202, 168, 0.12) } .banner--blue { background: rgba(43, 101, 248, 0.12) } .banner--lgrey { background: rgba(154, 169, 197, 0.12) } .banner--delivery { background: rgba(43, 101, 248, 0.12) } .banner--spotlight { background: rgba(43, 140, 252, 0.12) } .banner--favourite { background: rgba(254, 195, 9, 0.12) } .banner--spp { background: rgba(254, 195, 9, 0.12) } .banner--like { background: rgba(240, 33, 57, 0.12) } .banner--attention { background: rgba(255, 130, 0, 0.12) } .banner--newbie { background: rgba(134, 195, 19, 0.12) } .banner--riseup { background: rgba(41, 207, 41, 0.12) } .banner--invisibility { background: rgba(30, 178, 252, 0.12) } .banner--like { overflow: hidden } .banner--like .brick-group { margin: 0 0 0 -30px; width: 205px } .banner--like .brick-group .brick:first-child { margin-left: -5px } .banner--like .brick + .brick { margin-left: 4px } .banner--like .brick > .brick { right: -4px } .banner--spp .brick-group > .brick + .brick, .banner--attention .brick-group > .brick + .brick, .banner--encounters .brick-group > .brick + .brick, .banner--riseup .brick-group > .brick + .brick { margin-left: -7px } .banner--add-more-photos .brick-group { text-align: center } .banner--add-more-photos .brick-group > .brick:first-child { z-index: 1 } .banner--add-more-photos .brick-group .brick + .brick { position: absolute; left: 0; margin-left: 0 } .banner--add-more-photos .brick-group > .brick:last-child { right: 3px; left: auto } .banner--spotlight .brick-group > .brick + .brick { margin-left: -8px } .banner--favourite .brick-group > .brick + .brick, .banner--newbie .brick-group > .brick + .brick, .banner--find-friends .brick-group > .brick + .brick { margin-left: -12px } .banner .banner-cards { overflow: hidden; margin: 0 0 0 -30px; width: 205px; height: 100px } .banner .banner-card { position: absolute } .banner .banner-card:first-child { top: -12px; left: 14px; -webkit-transform: rotate(-13deg); transform: rotate(-13deg) } .banner .banner-card:nth-child(2) { top: 10px; left: 61px; -webkit-transform: rotate(6deg); transform: rotate(6deg) } .banner .banner-card:nth-child(3) { top: 40px; left: 110px; -webkit-transform: rotate(20deg); transform: rotate(20deg) } .banner .banner-cards .brick { top: 30px; right: 10px } .banner-app { display: inline-block; min-width: 100px; padding: 0 5px; text-align: center } .banner-app_ { position: relative; display: inline-block; overflow: hidden } .banner-app__title { display: block; font-size: .857em; color: #999; white-space: nowrap } .banner-app_:hover .banner-app__title { color: #4d4d4d } .banner-buttons > .btn { position: static } .banner--mobile .banner-buttons .btn { position: relative } .section { position: relative; overflow: hidden } .section h2 { display: inline-block } .section > .select { float: right; width: auto } .section .section__fill-status { display: none; margin: 0 0 0 10px } .section.active .section__fill-status { display: inline } .section.active { overflow: visible; margin-bottom: 0; border-bottom: 0 } .section--profile.active:before { border: 0 } .section.active .section-editable { margin: 15px -40px 0; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 15px 40px; background: #f7f7f7 } .section.active .section-editable__edit { display: block } .section.active .form-row.section-editable__edit { display: -webkit-flex; display: -ms-flexbox; display: flex } .section-editable__edit, .section.active .section-editable__view, .section.active .section-editable__edit + .form-label { display: none } .section__separate { margin: 10px 0; border-top: 1px solid rgba(0, 0, 0, .15) } .section__btn { opacity: 0; margin: -2px 0 0 7px } .section:hover .section__btn, .section.hover .section__btn, .section.active .section__btn { opacity: 1 } .section .section__btn:after { content: ''; position: absolute; top: auto; bottom: -26px; left: 50%; display: none; margin: 0 0 0 -6px; width: 12px; height: 12px; background: #f7f7f7; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: opacity .2s linear } .section.active .section__btn:after { display: block; border-width: 1px; border-style: solid; border-color: #dddfe1 transparent transparent #dddfe1 } .section.active .section__btn .b-link { top: 0; right: 0; bottom: 0; left: 0 } .section__expand { position: absolute; z-index: 1; top: 30px; right: 40px } .section__expand-lnk--show, .hide .section__expand-lnk--hide { display: none } .hide .section__expand-lnk--show { display: inline } .photo-ovl { position: absolute; z-index: 9; top: 0; bottom: 0; opacity: 0; visibility: hidden; width: 100%; max-height: 1000px; text-align: center; transition: opacity .15s linear, visibility .15s linear } .photo-ovl-frame { vertical-align: middle; display: inline-block } .photo-ovl-fade { position: absolute; z-index: 8; top: 0; bottom: 0; opacity: 0; visibility: hidden; width: 100%; background: #000; transition: margin-bottom .12s linear, opacity .15s linear, visibility .15s linear } .photo-ovl__title { margin-top: 20px; color: #fff } .photo-ovl__title > b { display: block } .photo-ovl-ico { display: inline-block; width: 64px; height: 64px } .photo-ovl-ico--trash { background: url() no-repeat 50% 0 } .photo-delete .photo-ovl--deleted { opacity: 1; visibility: visible } .photo-delete .photo-ovl-fade { opacity: .6; visibility: visible } .mm_profile_visible .photo-ovl-fade { margin-bottom: 0 } .undo { margin: 28px 0 0 } .next__users { position: relative; z-index: 1; overflow: hidden; border-radius: 27px; min-height: 108px; } .next__users:before { content: ''; position: absolute; z-index: 1; right: 0; bottom: -1px; left: 0; margin: 0 auto; border-radius: 50%; width: 44px; height: 22px; } .next__users_.animated { transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } .next__users_.animated .brick--outline:before { -webkit-animation: hide .25s; animation: hide .25s } .next__users_ > div:nth-child(n+6) { display: none } .undo__user > .brick-wrap { margin: 0 0 10px } .undo__user .brick--xsm { box-shadow: 0 0 0 2px #eee } .undo__user .b-link { top: -35px; right: -11px; bottom: -15px; left: -11px; border-radius: 22px 22px 0 0 } .undo__user .brick-txt { margin: 13px -8px 0; width: 60px; white-space: nowrap } .undo__user .tooltip { z-index: 0 } .undo__user .tooltip-no-js-wrap:hover .tooltip { margin-bottom: 2px } @media screen and (max-width:1600px) { .undo__user--with-icon .tooltip { right: 50%; left: auto; margin-right: -16px; margin-left: -292px; text-align: right; -webkit-transform: translateX(0); transform: translateX(0) } .undo__user--with-icon .tooltip-txt:before { right: 12px; top: -10px; left: auto } } .prev-next { margin: 63px 0 0 0 } .prev-next__btn { color: #4f4f4f } .prev-next__btn:hover { color: #2b65f8 } .prev-next__users { position: relative; z-index: 1; overflow: hidden; border-radius: 27px; max-height: 270px } .prev-next__users_.animated { transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } @media screen and (max-width:1355px) { .undo, .prev-next { -webkit-transform: translateX(-10px); transform: translateX(-10px) } } @media screen and (max-width:1295px) { .undo, .prev-next { -webkit-transform: translateX(-30px); transform: translateX(-30px) } .next__users:before, .undo__user .brick-txt { visibility: hidden } } @media screen and (max-width:1145px) { .undo, .prev-next { -webkit-transform: translateX(0); transform: translateX(0) } .next__users:before, .undo__user .brick-txt { visibility: visible } } @media screen and (max-width:1065px) { .undo, .prev-next { -webkit-transform: translateX(-10px); transform: translateX(-10px) } } @media screen and (max-width:1015px) { .undo, .prev-next { -webkit-transform: translateX(-30px); transform: translateX(-30px) } .next__users:before, .undo__user .brick-txt { visibility: hidden } } .awards-list { margin: -10px 0 0 } .awards-list + .btn { margin-top: 15px } .awards-item { position: relative; display: inline-block; margin: 10px 0 0 } .awards-item--empty .awards-item__txt { vertical-align: top } .awards-item__txt { margin-left: 17px; width: 145px } .awards-item__action { display: none } .awards-item__action > .checkbox { margin: 10px 0 } .awards-item__action > .checkbox > .blocker { display: block } .awards-list--compact { margin-right: -13px } .awards-list--compact .awards-item__txt { display: none } .awards-list--compact .awards-item { margin-right: 13px } .award { position: relative; display: inline-block; margin: 5px 0 } .award.active { cursor: pointer } .award.inactive { opacity: .4 } .ovl-awards { text-align: left } .ovl-awards .ovl-scroll { height: 450px; max-height: 450px } .ovl-awards .ovl-scroll_ { padding: 25px 0 0 } .ovl-awards .awards-item { vertical-align: top; display: inline-block; margin: 0 0 20px; width: 20%; min-height: 158px; text-align: center } .awards-item__progress { position: absolute; z-index: 1; top: 5px; right: 0; left: 0; overflow: hidden; margin: 0 auto; border-radius: 50%; width: 90px; height: 90px } .awards-item__progress_ { position: absolute; z-index: 1; bottom: 0; width: 100%; background: #256cf5 } .awards-item__progress_:before { content: ''; display: block; margin: -4px 0 0; width: 100%; height: 8px; background: url() repeat-x -7px 0 / 21px 4px } .awards-item--placeholder { color: rgba(77, 77, 77, .5) } .awards-item--placeholder:before { content: ''; vertical-align: top; display: inline-block; margin: 5px 0; border-radius: 50%; width: 90px; height: 90px; background: #e6ecf2 } .awards-item--placeholder .award { position: absolute; z-index: 2; top: 5px; right: 0; left: 0; margin: 0 auto } .awards-item__description, .awards-item__title { position: absolute; width: 100%; transition: opacity .2s } .awards-item__description { margin: 2px 0 0; font-size: .857em } .awards-item__description, .awards-item--placeholder:hover .awards-item__title { opacity: 0 } .awards-item--placeholder:hover .awards-item__description { opacity: 1 } .interests-choose__title { position: relative; display: inline-block; margin: 10px 0 5px 15px; color: #7a818c; text-decoration: underline; transition: color .15s } .interests-choose__title > .icon { position: relative; top: 1px; margin: 0 0 -3px 5px } .interests-choose__title:hover { color: #2b65f8 } .profile-intr-list { opacity: 0; overflow: hidden; height: 0; transition: height .2s linear, opacity .2s cubic-bezier(.165, .84, .44, 1) } .interests-choose.active .profile-intr-list { opacity: 1; height: 442px } .intr-list { position: relative; margin: 10px 0 15px 5px; border: 1px solid #d4d8dd; border-radius: 16px; padding: 15px 20px; background: #fff } .intr-list__item { margin-left: -14px; width: 50% } .intr-list__item.active > .intr-set { display: block } .intr-list__category { border-radius: 16px; padding: 7px 15px 8px; cursor: pointer; line-height: 1.143 } .intr-list__category:hover, .intr-set__item > a:hover { color: #2b65f8; text-decoration: underline } .intr-list__item.active .intr-list__category { background: #256cf5; cursor: default; color: #fff } .intr-list__item.active .intr-list__category:hover { text-decoration: none } .intr-list__category > .icon { margin: 1px 8px -3px 0 } .intr-set { position: absolute; top: 15px; right: 15px; bottom: 15px; left: 50%; display: none } .intr-set__item { padding: 8px 0; line-height: 1.143 } .intr-set__item--more { position: relative; text-decoration: underline } .intr-set__item--more:first-child { display: none } .intr-set__item--more:hover { color: #256cf5 } .intr-set__item--more > .icon { margin: 0 5px -4px 0 } .intr-label { display: inline-block; overflow: hidden; margin: 0 0 15px 0; border-radius: 22px; max-width: 100%; padding: 10px 20px; background: #f7f7f7; font-size: 1.429em; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis } .intr-category { vertical-align: top; display: inline-block; width: 246px; padding: 0 10px 0 20px; text-align: left } .intr-category:first-child .intr-category__col { float: right } .intr-category:last-child .intr-category__col { float: left } .photo-list { position: relative; width: 900px; height: 150px } .photo-list:before, .photo-list:after { content: ''; position: absolute; z-index: 2; left: 0; display: none; width: 100%; height: 1px; background: rgba(26, 36, 57, .15) } .photo-list:before { top: 0 } .photo-list:after { bottom: 0 } .profile-section__photo-list .photo-list:before, .profile-section__photo-list .photo-list:after { display: block } .photo-list__counter { position: absolute; right: 10px; bottom: 10px } .photo-list__arrow-l, .photo-list__arrow-r { position: absolute; top: 0; bottom: 0; display: none; margin: auto; height: 42px } .gallery_has_arrows .photo-list__arrow-l { left: 10px; display: block } .gallery_has_arrows .photo-list__arrow-r { right: 10px; display: block } .photo-list__action-bar { float: left; overflow: hidden; height: 150px; transition: width .25s } .photo-list--upload .photo-list__action-bar--application { width: 300px } .photo-list__photo-bar { position: relative; overflow: hidden; height: 150px; background: #2d3238 } .photo-list__action-bar + .photo-list__photo-bar { background: url() top left repeat } .photo-list__no-photos { width: 100%; text-align: center; color: #7a818c } .photo-list__slide { position: relative; left: 0; display: inline-block; min-width: 100%; height: 100%; white-space: nowrap; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .photo-list__slide.animated { transition: left .5s, margin .5s, -webkit-transform .5s; transition: transform .5s, left .5s, margin .5s; transition: transform .5s, left .5s, margin .5s, -webkit-transform .5s } .photo-list__item { position: relative; vertical-align: top; display: inline-block; width: 150px; height: 150px } .photo-list__action-bar .photo-list__item { display: none } .photo-list__action-bar .photo-list__item--add-photos, .photo-list--video .photo-list__item--add-videos { display: inline-block } .photo-list--video-progress .photo-list__item--add-videos { display: none } .photo-list--video-progress .photo-list__item--video-progress { display: inline-block } .photo-list__img_ { position: relative; display: block; opacity: .9; overflow: hidden; width: 150px; height: 150px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAGBAMAAAAmmzNnAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMA+J4KB1MKeAAAACJJREFUCNdjMBJUZmBAIlVcnIAsBCni4ghkwUl0Prp6dPMA3ScJ90t0OagAAAAASUVORK5CYII=') no-repeat center center; cursor: pointer } @media only screen and (-webkit-min-device-pixel-ratio:1.25) { .photo-list__img_ { outline: 1px solid transparent } } .photo-list__item:hover .photo-list__img_ { opacity: 1 } .photo-list__img { position: absolute; top: -500px; right: -500px; bottom: -500px; left: -500px; margin: auto } .photo-list__item--private .photo-list__img, .photo-list__item--not-moderated .photo-list__img { width: 160px; height: 160px; -webkit-filter: blur(5px); filter: blur(5px) } .photo-list__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center } .photo-list__video { margin: 45px; border-radius: 100%; width: 60px; height: 60px; padding: 14px; background: rgba(0, 0, 0, .5) } .photo-list__item:hover .photo-list__video { background: #000 } .photo-list__action { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background: rgba(51, 51, 51, .8); text-align: center; color: #fff; white-space: normal } .photo-list__action--blue { background: rgba(37, 108, 245, .8) } .photo-list__action .icon { vertical-align: top } .photo-list__photo-bar .photo-list__action .icon, .photo-list__photo-bar .photo-list__action-title { opacity: .7 } .photo-list__photo-bar .photo-list__action--add-photos .icon { opacity: .3 } .photo-list__item:hover .photo-list__action .icon, .photo-list__item:hover .photo-list__action-title { opacity: 1 } .photo-list__action-bar .photo-list__action, .photo-list__item--delete .photo-list__action--delete, .photo-list__item--send .photo-list__action--send, .photo-list__action--facebook, .photo-list__action--instagram, .photo-list__action--private, .photo-list__action--not-moderated, .photo-list__action--add-photos { display: block } .photo-list__action--private { z-index: 3; background: rgba(112, 55, 192, .7) } .photo-list__action-bar .photo-list__action--add-photos { background: #1f72f2 } .photo-list__action-bar .photo-list__action--add-photos:hover { background: #1c68d9 } .photo-list__action-bar .photo-list__action--add-videos, .photo-list__action-bar .photo-list__action--video-progress { background: #3674a9 } .photo-list__action-bar .photo-list__action--add-videos:hover { background: #2e618f } .photo-list__photo-bar .photo-list__action--add-photos { background: transparent } .photo-list__photo-bar .photo-list__action--add-photos:hover { background: #bfbfbf } .photo-list--video-progress .photo-list__action--video-progress .loader { position: relative; margin: 17px auto 9px } .photo-list__action_ { max-width: 100% } .photo-list__action-title { display: block; padding: 10px 5px 0 } .photo-list__action.photo-list__action--blue .icon, .photo-list__action--blue .photo-list__action-title { opacity: 1 } .photo-list__nav { position: absolute; z-index: 2; top: 5px; right: 10px; left: 0; cursor: pointer; text-align: left; white-space: normal } .photo-list__nav-action { float: right; visibility: hidden; text-align: right } .photo-list__img_:hover + .photo-list__nav > .photo-list__nav-action, .photo-list__link:hover + .photo-list__nav > .photo-list__nav-action, .photo-list__nav:hover > .photo-list__nav-action, .photo-list__nav-action .btn.hovered { visibility: visible } .photo-list__nav-action .datalist .option { font-size: .889em; line-height: 1.25 } .photo-list__default-photo { display: inline-block } .photo-list__default-photo + .btn { margin-left: 7px } .photo-list__default-photo:not(.active) .btn.active, .photo-list__default-photo.active .btn:not(.active) { display: none } .photo-list__photo-coaching { position: absolute; z-index: 1; right: 10px; bottom: 10px; left: 10px } .photo-list__photo-coaching .photo-coaching { position: absolute; right: 0; bottom: 0; left: 0; margin: auto } .photo-list__photo-coaching .photo-coaching__star { position: relative } .photo-list__item--send .photo-list__nav, .photo-list__item--delete .photo-list__nav, .photo-list__item--delete .photo-list__photo-coaching { display: none } .photo-list__img_:hover + .photo-list__nav + .photo-list__photo-coaching .photo-coaching__star, .photo-coaching--sm:hover .photo-coaching__star { background-position: 0 -39px } .photo-list__photo-coaching .icon { position: relative } .photo-list__photo-coaching .photo-coaching:after, .photo-list__photo-coaching .icon:after { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .photo-list__photo-coaching .icon:after { box-shadow: 0 2px 8px 3px rgba(0, 0, 0, .1); width: 4px; height: 4px } .photo-list__photo-coaching .photo-coaching:after { box-shadow: 0 0 8px 3px rgba(0, 0, 0, .1); width: 100%; height: 0 } .photo-list__private-photo { position: absolute; z-index: 1; bottom: 4px; left: 9px } .photo-list--grid { height: auto; min-height: 600px } .photo-list--grid .photo-list__action-bar { position: absolute; z-index: 1; top: 0; left: 0; width: 150px } .photo-list--grid.photo-list--video .photo-list__action-bar { width: 300px } .photo-list--grid .photo-list__photo-bar { height: auto } .photo-list--grid .photo-list__slide { display: block; white-space: normal; -webkit-transform: none !important; transform: none !important } .photo-list--grid .photo-list__photo-bar .photo-list__item:first-child { margin: 0 0 0 150px } .photo-list--grid.photo-list--video .photo-list__photo-bar .photo-list__item:first-child { margin: 0 0 0 300px } .message-attach .photo-list__photo-bar { width: 430px } .photo-coaching { width: 90px; height: 16px; background: url() 0 0 repeat-x } .photo-coaching--sm { width: 65px; height: 13px; background: url() 0 0 repeat-x } .photo-coaching--empty { background-position: 0 -32px } .photo-coaching--sm.photo-coaching--empty { background-position: 0 -26px } .photo-coaching__star { display: block; width: 0; height: 100%; background: url() 0 -16px repeat-x } .photo-coaching--sm .photo-coaching__star { background: url() 0 -13px repeat-x } .photo-coaching__star--1 { width: 20% } .photo-coaching__star--2 { width: 40% } .photo-coaching__star--3 { width: 60% } .photo-coaching__star--4 { width: 80% } .photo-coaching__star--5 { width: 100% } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .photo-coaching, .photo-coaching__star { background-image: url(); background-size: 18px 48px } .photo-coaching--sm, .photo-coaching--sm .photo-coaching__star { background-image: url(); background-size: 13px 52px } } .upload-area { margin: 25px 0 20px; border: 2px dashed rgba(0, 0, 0, .15); border-radius: 10px; padding: 20px 25px; background: #f7f7f7; background-clip: border-box; transition: background .1s linear, border-color .1s linear } .upload-area.hover { border-color: rgba(0, 0, 0, 0.167); background: rgb(242, 242, 242) } .upload-control.simple, .old-upload .upload-control.html5 { display: none } .old-upload .upload-control.simple { display: inherit } .classic-upload-btn { overflow: hidden } .classic-upload-btn input { position: absolute; top: 0; left: -300px; opacity: 0 } .gift { position: relative; display: inline-block; margin: 5px 0; width: 70px; height: 70px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .gift:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid transparent; border-radius: 100%; transition: border .1s } .gift--framed:before { box-shadow: 0 1px rgba(0, 0, 0, .03); border-radius: 0 } .gift--border:before { border-color: rgba(0, 0, 0, .1); background: #fff } .gift--hover:not(.gift--border):before { border-width: 2px } .gift--hover:hover:before, .gift--hover.active:before { border-width: 2px; border-color: #2b65f8 } .gift > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: opacity .2s, -webkit-filter .2s; transition: filter .2s, opacity .2s; transition: filter .2s, opacity .2s, -webkit-filter .2s } .gift--invisible > img { opacity: .3 } .gift--framed > img { width: 54px; height: 54px } .gift__private { position: absolute; right: 10px; bottom: 15px; padding: 2px 2px 1px; background: #000; font: 700 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #fff } .gift > .brick--xsm { position: absolute; right: -2px; bottom: -7px } .gift > .brick:before { box-shadow: 0 0 0 2px #f7f7f7 } .gift > .btn { position: absolute; z-index: 2; right: 0; bottom: -5px; opacity: 0; visibility: hidden; transition: all .2s } .gift--photo > .btn { right: -10px; bottom: -15px } .gift-add { position: relative } .gift-add__txt { margin: 0 0 0 17px; width: 145px; transition: color .2s } .gift-add:hover .gift-add__txt { color: #2b65f8 } .gift-add .gift > img { opacity: .8 } .gift-add:hover .gift > img { opacity: 1 } .gifts-list { margin: 5px -10px 0 0 } .gifts-list > .gift { margin-right: 10px } .gifts-list > .gift > .btn.active, .gifts-list > .gift:hover > .btn, .gifts-list > .gift.active > .btn { opacity: 1; visibility: visible } .gifts { text-align: left } .gifts__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin: 5px 22px 0 0 } .ie10 .gifts__title > b { display: block } .gifts .tabs__item { margin: 0 0 -1px } .ovl .gifts__content > .scroll { height: 250px; max-height: 250px } .ovl .gifts--by-price .gifts__content > .scroll { height: 300px; max-height: 300px } .gifts__btn { position: relative; display: inline-block; padding: 0 5px } .gifts-roll { margin: -5px -26px 5px 0 } .gifts-roll > .gift { vertical-align: top; display: none; margin: 8px 19px 9px -2px; width: 74px; height: 74px } .gifts-roll > .gift--hover:not(.gift--framed):before { border-radius: 6px } .gifts--all .gift, .gifts--popular .gift.popular, .gifts--romantic .gift.romantic, .gifts--friendship .gift.friendship, .gifts--framed .gift.framed { display: inline-block } .gifts-msg { opacity: 0; overflow: hidden; margin: 0; height: 0; text-align: left; transition: height .3s ease-in-out, margin .3s ease-in-out, opacity .4s ease-in-out } .gifts-msg--visible { opacity: 1; margin: 10px 0 0 0; height: auto } .gifts-msg__counter { float: right; margin: -3px 5px 0 0 } .gifts-msg > .textarea { height: 65px } .single-gift-carousel { position: relative; margin: 30px auto } .single-gift-carousel__arrow { position: absolute; top: 50%; margin: -21px 0 0 } .single-gift-carousel__arrow--left { left: 0 } .single-gift-carousel__arrow--right { right: 0 } .single-gift-carousel__items { position: relative; overflow: hidden; margin: 0 auto; width: 240px; height: 200px; white-space: nowrap } .single-gift-carousel__scroll.active { position: relative; white-space: nowrap; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out } .single-gift-carousel__item { display: inline-block; width: 240px } .secret-comments { margin: 5px 0 0 } .secret-comments__item { position: relative; padding: 10px 0 } .secret-comments > .secret-comments__item:first-child { padding-top: 0 } .secret-comments__icon { width: 40px; height: 40px } .secret-comments__item .secret-comments__icon { margin: 0 } .secret-comments__text { margin: 0 0 0 15px; width: 145px } .secret-comments__text--long { width: 175px } .secret-comments__comment { margin: -2px 0 0 15px } .secret-comments__comment_ { display: block; overflow: hidden; max-height: 38px } @supports (-webkit-line-clamp:2) { .secret-comments__comment_ { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } } .secret-comments__btn { margin: 10px 0 0 } .secret-comments__read-all { margin: 5px 0 0 } .secret-comments__teaser-ico { margin: 0 0 -4px; line-height: 1; transition: opacity .2s } .secret-comments__item:hover .secret-comments__teaser-ico { opacity: .7 } .secret-comments__teaser-ico > .icon { width: 40px; height: 40px } .secret-comments-wrap { margin-top: -40px } .secret-comments-wrap .scroll_ { height: 324px } .secret-comments-wrap .secret-comments { margin: 0 -10px; padding: 15px 0 0 0; text-align: left } .secret-comments-wrap .secret-comments__text { vertical-align: top; display: inline-block; overflow: hidden; width: 440px } .secret-comments-wrap .secret-comments__text > time { display: block; margin: -2px 0 5px } .reported .secret-comments__icon, .reported .secret-comments__text { opacity: .5 } .secret-comments__divider { position: relative; margin: 23px 0; text-align: center } .secret-comments__divider > span { position: relative; display: inline-block; padding: 0 15px; background: #fff } .secret-comments__divider:before { content: ''; position: absolute; top: 10px; right: 0; left: 0; border-top: 1px solid #d9d9d9 } .secret-comments__action { position: absolute; top: 4px; right: -10px; opacity: 0; visibility: hidden; transition: opacity .15s linear, visibility linear .15s } .reported .secret-comments__action, .secret-comments__item:hover .secret-comments__action { opacity: 1; visibility: visible } .reported .secret-comments__report, .secret-comments__reported { display: none } .reported .secret-comments__reported { display: inline-block } .secret-comments__delete, .secret-comments__report { cursor: pointer } .secret-comments__icon--new::after { content: ''; position: absolute; top: 0; right: 0; left: auto; display: block; border: 2px solid #fff; border-radius: 50%; width: 8px; height: 8px; background: #f02139 } .secret-comments__prompt { height: 326px; text-align: center } .secret-comments__prompt-txt { margin: 45px auto 0; width: 350px } .secret-comments__form-wrap { margin: 0 -40px -20px; border-top: 1px solid #d9d9d9; padding: 15px 30px 0; text-align: left } .secret-comments__form-wrap .secret-comments__icon { float: left } .secret-comments__textarea { overflow: hidden; padding-left: 10px } .secret-comments__textarea .textarea { min-height: 32px } .secret-comments__textarea .char-counter { float: right; margin: 0 5px 0 0; font-size: .786em; color: #aaadb2 } .secret-comments__vote .btn-group { margin: 0 0 0 15px } .secret-comments__follow { margin: 10px 0 0 } .secret-comments__form, .secret-comments__vote, .secret-comments__form-wrap--vote .secret-comments__thanks { display: none } .secret-comments__form, .secret-comments__vote, .secret-comments__thanks { -webkit-animation: show .2s linear; animation: show .2s linear } .secret-comments__form-wrap--form .secret-comments__form, .secret-comments__form-wrap--vote .secret-comments__vote, .secret-comments__thanks { display: block } .upload-site { position: relative; vertical-align: top; display: inline-block; margin: 0 32px 0 0; max-width: 64px } .upload-site:last-child { margin: 0 } .upload-site__txt { margin: 0 -10px } .upload-site:hover .upload-site__txt { color: #2b65f8 } .icon--google + .upload-site__txt { direction: ltr; unicode-bidi: embed } .profile-photo-import { width: 900px; height: 180px; padding: 30px 20px; text-align: center } .profile-photo-import .upload-site__txt { font-size: .786em } .interests .int{ position:relative; display:inline-block; width:auto; border-radius:25px; background:#F2F2F2; padding-top:8px; padding-bottom:8px; padding-left:20px; padding-right:20px; margin-right:10px; margin-bottom:6px; } .interests .int span{ color:#4D4D4D; font-size:14px; font-weight:600; } .interests .add_interest{ display:inline-block; width:26px; height:24px !important; border-radius:25px; padding-top:2px; padding-bottom:2px; padding-left:10px; padding-right:10px; border:2px solid #5177A4; background:#fff; margin-right:10px; margin-bottom:6px; color:#fff; font-size:14px; font-weight:600; } .interests .add_interest::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #5177A4; font-size:20px; text-align:center; } .interests .add_interest:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #5177A4; opacity: 1; font-size:20px; text-align:center; } .interests .add_interest::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #5177A4; opacity: 1; font-size:20px; text-align:center; } .interests .add_interest:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #5177A4; font-size:20px; text-align:center; } .interests .add_interest:focus{ outline:none !important; width:140px; background:#5177A4; } #new-int{ width: auto; height: auto; display:inline-table; background:none; } .add-int{ position:absolute; top:8px; right:15px; width: 160px; height: auto; display:inline-table; background:none; z-index:99; } .edit-right-profile{ position:absolute; top:10px; right:20px; width: 25px; height: 25px; display:inline-table; background:none; z-index:99; } .interests .int .delete_int{ position:absolute; right:0px; top:0px; width:16px; height:16px; border-radius:50%; border:1px solid #D52E46; cursor:pointer; } .chart { position:absolute !important; top:60px; left: 2px; margin:30px auto 0 auto; } .tag { width:100%; font-family:"Montserrat", trebuchet, sans-serif; text-align:center; position:absolute; top:43%; color:#777777; } .inline { vertical-align: middle; display: inline-block } .middle { vertical-align: middle; display: inline-block; height: 100% } .f-left { float: left } .f-right { float: right } .left { text-align: left } .right { text-align: right } .center { text-align: center } .relative { position: relative } .absolute-center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .break-word { word-wrap: break-word } .ellipsis { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis } .table { display: table; width: 100% } .table .table-row { display: table-row } .table .table-cell { vertical-align: middle; display: table-cell } .table .table-cell:empty:before { content: ''; display: inline-block } .table .table-cell + .table-cell { width: 5px; padding-left: 10px; white-space: nowrap } .table .table-cell--top { vertical-align: top } .table .table-cell--bottom { vertical-align: bottom } .flex, .flex__item.flex { display: -webkit-flex; display: -ms-flexbox; display: flex; box-sizing: border-box } .flex--middle { -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center } .flex--bottom { -webkit-align-items: flex-end; -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end } .flex--column { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .flex--justify { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .flex--center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .flex--wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .flex__item { display: inline-block } .flex--table > .flex__item + .flex__item { padding: 0 0 0 10px } .flex__item--fixed { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .flex__item--expand { -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100% } .flex__item--auto { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .spp-unsubscribe { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; overflow: hidden } .spp-unsubscribe .section-left-side, .spp-unsubscribe_ { border-top: 18px solid #f69426; padding-top: 15px } .spp-unsubscribe_ { padding-right: 40px; padding-left: 40px } .spp-unsubscribe .section-right-side { padding-top: 40px } .spp-unsubscribe__grey-box { margin: 0 0 20px; border: 1px solid #bfbfbf; padding: 20px; background: #f7f7f7; color: #999 } .spp-unsubscribe .payment-feature-column__cell { padding-top: 22px } .spp-unsubscribe__reason-list { padding: 0 20px 20px } .spp-unsubscribe__reason-item { padding: 5px 0 } .spp-unsubscribe__submit { width: 100%; text-indent: -1000px } .spp-unsubscribe__footer { margin: 20px 0 0 } .payment-promo__buttons { margin: 10px 0 } .major-features { margin: 45px 0 0 0; text-align: center } .major-features__item { position: relative; vertical-align: top; display: inline-block; margin: 0 30px; width: 210px; min-height: 145px } .major-features__item:hover .link { border-color: #2b65f8; color: #2b65f8 } .major-features__figure { position: relative; margin: 0 auto 25px; width: 168px; height: 209px; background: url('../images/feature-frame.png') no-repeat 0 0; } .major-features__photo { position: absolute; top: 6px; right: 8px; bottom: 6px; left: 8px; overflow: hidden; border-radius: 5px } .payment-info__photo:after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 0 0 1px rgba(52, 58, 69, .15) inset; border-radius: 5px } .major-features__figure--profile { background-position: -173px 0 !important; } .major-features__figure--profile .major-features__photo { top: 40px; bottom: 6px } .major-features__figure--profile .major-features__photo, .major-features__figure--profile .major-features__photo::after { border-radius: 0 0 5px 5px } .major-features__figure--card { background-position: -346px 0 } .major-features__figure--card .major-features__photo { top: 6px; bottom: 40px } .major-features__figure--card .major-features__photo, .major-features__figure--card .major-features__photo::after { border-radius: 5px 5px 0 0 } .payment-info__ico--favorite { background-position: -519px 0 } .payment-info__ico--favorite .major-features__photo { top: 40px; bottom: 6px } .payment-info__ico--favorite .major-features__photo, .payment-info__ico--favorite .major-features__photo::after { border-radius: 0 0 5px 5px } .payment-info__photo > img { position: absolute; z-index: 1; top: -100px; right: -100px; bottom: -100px; left: -100px; margin: auto } .major-features__figure > .icon { position: absolute; z-index: 1; right: 0; bottom: -10px; left: 0; margin: auto; box-shadow: 0 0 0 2px #fff; border-radius: 50% } .major-features__item .btn { position: static } .minor-features { margin: 30px 30px 0; text-align: center } .minor-features__item { position: relative; vertical-align: top; display: inline-block; width: 19%; padding: 0 20px } .minor-features__ico { margin: 0 0 15px; height: 48px } .section-empty { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; height: 100%; text-align: center } .section-empty__title { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 30px 0 0 } .section-empty__title + .section-empty__content { padding-top: 0 } .section-empty__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 100% } .promo { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; height: 100%; text-align: center } .promo__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; width: 80%; max-width: 600px; padding: 50px 20px } .promo__content--low { padding-top: 20px; padding-bottom: 20px } .promo__content:not(:last-child) { padding-bottom: 0 } .promo__media { margin: 0 0 25px } .promo__hint { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100% } .promo__hint:empty { display: none } .ie11 .promo__content > p, .ie11 .promo__content > div, .ie11 .promo__content > h1, .ie11 .promo__content > h2 { max-width: 100% } .video { position: relative } .video iframe { width: 100% } .video-subscribe { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; padding: 0 20px } .video-subscribe__title, .video-subscribe__actions { color: #fff } .video-subscribe__title { width: 375px } .video-subscribe__btn, .video-subscribe__btn iframe { width: 123px !important } .video-subscribe__btn iframe { visibility: inherit !important } .video-subscribe__actions { position: absolute; right: 0; bottom: 35px; left: 0; font-size: 1.143em } .video-finished .video-subscribe { z-index: 1; visibility: visible } .video-finished .video-subscribe:before { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .8) } .video-subscribe__close { position: absolute; top: 20px; right: 20px; cursor: pointer } .video-splash { position: relative } .video-splash:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 88px; height: 88px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAMAAABGS8AGAAAAnFBMVEUjJCYAAAD///8kJCYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdHh8AAAAxMTMAAAAUFRYgISIAAAAAAAA1NTUAAAD7+/vs7OyoqakUFBT39/dKS0zn5+cZGhvNzc1hYmS4uLhxcXGEhYbz8/PT09OBgYHf39/39/fe3t6urq4+Pj8gISKXmJmdnZ2VlZV0dHW7u7zFxcV7fH3///8EelUfAAAAM3RSTlOzALOzBhcCEAsmQC68ILNJzLg5Ml9Os6yzVLCzq8Ozs5R1s62efKP++fDZzrOIheWzmN21BJbBAAAE6UlEQVRYw6SV23aiQBBFe2zFANIdAQOI4aZmburEyf//23R1NxZSXB7mPCRxaXbO2nU07Nt8HGfZjeM43+ZDwRT68rJer1cma5WXF6D/DxiggAwC13V9HfVDEAAf4JPgqa5ADVw/Cj1Pyp2OlJ4XRr4bAHuqN5soC1QFlXF9q06H437xdjx8nKpbHUsFB/ZEbTaBdf1QZnX1sSD5qOpMhr5L0DNgR2Mjb1ff94uR7O/1zos02pkEU2x2SxaTSW7ZOJoNcVeB72XXYwt4K9KmzIVgTIi8bNLirX3meM08P1gBeRa8XKq6oTwnba20FKwXUaaPp88yVKWXSwKmGlTd+GS7piVng+FlanufYlWa6mBUQyTPe3Ofi7CULhF7X+zLzjKiOlif64ZZZdoa7DOTazCiTesqC90+mfW5Xmx2W+R82MFT77wwu469PpkR7kHXbXifRctDeKNLH5BMwYab6Nfl+Nsz4blukhjyE5hyC9Gvh99oRDFEZihiHYTGw6dg8+Ed8qexEQZrlME63CjTd0s5QcyEp/qCWdQhMxThy0r35b3douvRTXPduZK+lYFgBwSfid9JEfiAW89n0Oy0YBS8B1NiGDT3SMB19h3NDEWcYL/58Gw58kb4Oez5hDKYLWxFNGNt52/ZWBm2MrOFoywBwRwLksxI56A5ySJbmbWFr1rEcLntZrOdxKKMq6lswVD42F+wLa+5P3+/b+d3DWs+QuUWDIVvcFQxtCXGt+9fP369Q+lptoBZ3aAygHVhfweGLyNNNq9fX9//vLZkPoq/gOWdD5UBDBuuwbDoVsIvAFYBHTP3E2C5hi1bsCvvYJhIMLFg1IH+hyzfpavB5nRgp8Q3A35KIBh1jA+9hEuZ87GHiYT8z+iBUQf+zb685OGC6U1UYGKwB4JRB30d77qoPNeA1SYOYGJsR9yAiQ7Cty4OahcKDIpjvYlBaNsYM/VmMbuIQbICG8XFgOKnuU3pwBRGsgKr23lXHBs9CkfwpA6UfPXU9Vh7u2bIA2CxMdVBizTmegYsT50VUz6CqQ7e32epP+41eOVLGEVOPgUImOqgRXKYhfRXGrw7ajAJAVMdWNX+JOCjc9eC4Q0tyCYJmOrYkmkCeP8ALwBMkARMdPzd0HsD6wH+15wZrCAMBDFUzEkEvSmoN8H//0RBqln3MRu0UM1BRDC2W2cmyRwexGyZmZjS5Y342hIL4zQchVsSjuL49cNrgYe32d8exIrEufrkv5sLpJRSuUCMqUBQ0igSaVTSBkvaTahC1YTEO2yakNsmNCCI0TY1aptu9PmKfQxC20aj92gq500aTYZHE4cpiTlMS6gdphz/wjDFMRS8Hv8QLOpUDgRLwSsKFkus7tefFOokVu0lLLE6UahB27QKer4IguhNFFLGisRRqFDGUngTnfAWSgjCG1bB3zRgFXi9glWguQGCuVFtbmjHCPIQtGM0kJ9DNJC0vNlE+01teWnS0WfBS2qa9DpWkEsqA7FCEYSMrRE+RhASohtSklWMboZhU3mZ6tuOGDbleCwnTWI8lgM9Q7DC7R0g0MsRpFYROYJ0GPsKTVcZDk0Rx4aYt0SOeRF4I5gmhGCakffnUbpClL5g+J/XFdqdw7pimQXL/JXQ75dY1dptfbpesHb7l0UhVpvbCVhtzl7GTpi3jCW5YdIh7l5s03+0vYBBAAAAAElFTkSuQmCC') no-repeat 0 0 } .video-splash__img { display: block; width: 100% } .video-splash + .video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .promo-video { position: relative } .promo-video:before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 470px; background: #64c3eb radial-gradient(#64c3eb, #00a0db) } .promo-video__container { position: relative; margin: 0 auto 40px; width: 892px } .promo-video__title { color: #fff } .promo-video .video-player, .promo-video .fb-post { background: #000 } .promo-video .video { margin: 0 0 35px } .promo-video .video:before { content: ''; position: absolute; right: 20px; bottom: 0; left: 20px; box-shadow: 0 10px 40px 10px rgba(0, 0, 0, .2); border-radius: 0 0 200px 200px / 0 0 10px 10px; height: 20px } .tabs--messenger { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 64px } .tabs--messenger .tabs__item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 48%; padding: 0 5px; color: #bfbfbf; word-wrap: break-word } .tabs--messenger .tabs__item { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .tabs__item--favourites { max-width: 48px } .tabs--border { border-bottom: 1px solid rgba(0, 0, 0, .15) } .tabs--top .tabs__item:after { top: -1px; bottom: auto } .tabs__item { position: relative; display: inline-block; padding: 0 20px 14px; cursor: pointer; font-family: 'FS Albert Pro Web Bold', Helvetica, Arial, sans-serif; text-align: center; text-decoration: none } .tabs__item:after { content: ''; position: absolute; bottom: 0; left: 0; opacity: 0; border-bottom: 3px solid transparent; width: 100%; transition: opacity .2s } .tabs__item:hover { color: #2b65f8 } .tabs__item.active { cursor: default; color: #2b65f8 } .tabs__item.active:after { opacity: 1; border-color: #2b65f8 } .footer-wrap { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 25px 0 0 } .footer-apps { margin: 0 0 25px } .footer-app { position: relative; overflow: hidden; margin: 0 0 0 20px } .footer-app > .btn--ico { vertical-align: middle; margin: 0 } .footer-app > .btn--ico:before { border: 0 } .footer-app__title { margin: 0 0 0 5px } .footer-app:hover .footer-app__title { color: #2b65f8 } .footer__col { -webkit-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50% } .footer-menu__item { position: relative; display: inline-block; margin: 0 15px 0 0 } .footer-menu__item:before { content: '\b7'; position: absolute; right: -12px; font-weight: 700; color: #bfbfbf } .footer-menu__item:last-child:before { content: '' } .footer-menu__link { color: #bfbfbf } .btn-mute { line-height: 1 } .btn-mute .btn-mute__off, .btn-mute--off .btn-mute__on { display: none } .btn-mute--off .btn-mute__off { display: inline-block } .section--profile { margin: 0 -40px; padding: 25px 40px } .section--profile:before { content: ''; position: absolute; right: 40px; bottom: 0; left: 40px; } .profile-info-v2__left > div:last-child > .section--profile:before { display: none } .section--profile.active { padding-bottom: 0 } .section--profile .form-label { width: 30% } .profile-friends { margin: 0 0 -15px; width: 560px } .profile-friends .brick-wrap { vertical-align: top; margin: 0 17px 15px 0 } .profile-friend__txt { margin: 0 0 15px; width: 520px } .brick-wrap:nth-child(2) + .profile-friend__txt { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; width: 215px; height: 100px } .brick-wrap:nth-child(2) + .profile-friend__txt .profile-friend__txt-descr { width: 215px } .profile-friends .brick + .brick { margin-left: -83px; box-shadow: 0 0 0 3px #fff } .friend-connected__first, .friend-connected__second, .friend-connected__third { display: none } .first .friend-connected__first, .second .friend-connected__second, .third .friend-connected__third { display: block } .profile-friends .brick-wrap.loading > .brick:after, .profile-friends .brick-wrap.loading .brick--hover:after { background: #d6d6d6 } .profile-friends .brick-wrap .loader { z-index: 1 } .profile-friends .brick > .icon { opacity: 1 } .profile-friends .brick.brick--covered:after { background: rgba(255, 255, 255, .6) } .profile-friends .brick-wrap--double { margin-right: 12px; margin-left: -5px } .loading > .profile-friends__more-link { display: none } .profile-section__txt { display: inline-block; margin: 0; max-width: 100%; white-space: pre-wrap; word-wrap: break-word } .profile-section__more-txt { position: relative; top: 2px; margin: 0 0 0 7px; cursor: pointer } .profile-section__txt-hide, .profile-section__txt-active .profile-section__more-txt { display: none } .profile-section__txt-active .profile-section__txt-hide { display: inline } .profile-section__txt + .btn { margin-top: 15px } .profile-edit__btn-right { margin-top: 10px; text-align: right } .section--profile .checkbox--radio { margin: 5px 12px 5px 0 } .section--profile .checkbox--radio:last-child { margin-right: 0 } .profile-photo-grid { position: absolute; z-index: 2; top: 110px; visibility: hidden; width: 100%; background: #fff; -webkit-transform: translate(0, 1000px); transform: translate(0, 1000px); transition: visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045); transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear; transition: transform .3s cubic-bezier(.6, 0, .735, .045), visibility .3s linear, -webkit-transform .3s cubic-bezier(.6, 0, .735, .045) } .profile-grid-visible { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .profile-grid-visible .profile-photo-grid { visibility: visible; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1); transition: transform .3s cubic-bezier(.175, .885, .32, 1.1), -webkit-transform .3s cubic-bezier(.175, .885, .32, 1.1) } .profile-grid-visible-end .profile-photo-grid { position: relative; top: 0 } .profile-info { position: relative } .profile-grid-visible-end .profile-info { position: absolute; top: 110px } .photo-gallery { position: absolute; top: 0; bottom: 0; width: 100%; background: #2d3238; transition: width .3s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .photo-gallery:before { content: ''; position: absolute; z-index: 2; top: 0; right: 0; bottom: -90px; left: 0; visibility: hidden; background: rgba(0, 0, 0, 0); transition: background .1s linear .2s, visibility 0s linear .3s } .mm_profile_visible .photo-gallery:before { visibility: visible; background: rgba(0, 0, 0, .3); transition: background .1s linear } .photo-gallery__photo, .photo-gallery__photo > img, .photo-gallery__photo > video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; max-width: 100%; height: auto; max-height: 100% } .photo-gallery__photo { overflow: hidden } .photo-gallery__photo > img { opacity: 0; -webkit-animation: show .2s ease-in-out forwards; animation: show .2s ease-in-out forwards } .photo-gallery__photo > video { z-index: 1; display: none; opacity: 0; -webkit-animation: show .2s ease-in-out forwards; animation: show .2s ease-in-out forwards } .photo-gallery__video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; text-align: center } .photo-gallery__video > .inline { position: relative; z-index: 2 } .photo-gallery__video .icon > .b-link { top: -120px; right: -120px; bottom: -120px; left: -120px } .mm_video .photo-gallery__video { display: block } .mm_video_playback .photo-gallery__photo > img { display: none } .mm_video_playback .photo-gallery__photo > video { display: block } .mm_video_pause .photo-gallery__video { display: block } .mm_video_pause .photo-gallery__photo > img { display: none } .mm_video_pause .photo-gallery__photo > video { display: block } .photo-gallery__blocker { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .photo-gallery__blocker_ { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; padding: 0 160px; background: rgba(255, 255, 255, .9); text-align: center } .photo-gallery__blocker_--blue, .photo-gallery__blocker_--gift { background: rgba(37, 108, 245, .8); color: #fff } .photo-gallery__blocker-icon-sm { margin: 0 0 15px } .photo-gallery__blocker-icon { margin: 0 0 25px } .photo-gallery__blocker p + p { margin-top: -10px } .photo-gallery__blocker-options { margin: 20px 0 0 } .mm_private_photos .photo-gallery__abuse, .mm_facebook_photos .photo-gallery__abuse, .mm_instagram_photos .photo-gallery__abuse, .mm_not_moderated_photo .photo-gallery__abuse { display: none } .mm_private_photos .private-photos, .mm_facebook_photos .facebook-photos, .mm_instagram_photos .instagram-photos, .mm_gift_screen .photo-gallery__blocker_--gift, .mm_not_moderated_photo .not-moderated-photos { z-index: 1; opacity: 1 } .mm_gift_screen .photo-gallery__photo > img, .mm_private_photos .photo-gallery__photo > img, .mm_not_moderated_photo .photo-gallery__photo > img { -webkit-filter: blur(15px); filter: blur(15px) } .mm_private_photos .photo-gallery__arrow, .mm_facebook_photos .photo-gallery__arrow, .mm_instagram_photos .photo-gallery__arrow, .mm_not_moderated_photo .photo-gallery__arrow { fill: #000 } .mm_private_photos .photo-gallery__link--next, .mm_facebook_photos .photo-gallery__link--next, .mm_instagram_photos .photo-gallery__link--next, .mm_not_moderated_photo .photo-gallery__link--next, .mm_gift_screen .photo-gallery__link--next { left: 90% } .mm_gift_screen .photo-gallery__abuse, .mm_gift_screen .photo-gallery__video-button, .mm_gift_screen .photo-gallery__corner { display: none } .photo-gallery__abuse { position: absolute; z-index: 1; right: 30px; bottom: 25px } .photo-gallery__link { position: absolute; z-index: 1; top: 0; bottom: 0; display: none; cursor: pointer; -webkit-transform: translateZ(0); transform: translateZ(0) } .photo-gallery__link--prev { right: 810px; left: 0; -webkit-transform: translateZ(0); transform: translateZ(0) } .photo-gallery__link--next { right: 0; left: 90px; -webkit-transform: translateZ(0); transform: translateZ(0) } .mm_has_gallery .photo-gallery__link { display: block } .photo-gallery__arrow { position: absolute; top: 50%; opacity: .2; margin: -20px 0 0; width: 15px; height: 40px; -webkit-transform: translateZ(0); transform: translateZ(0); transition: opacity .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; pointer-events: none } .photo-gallery__arrow--left { left: 40px } .photo-gallery__arrow--right { right: 40px } .photo-gallery__link:hover > .photo-gallery__arrow { opacity: 1; -webkit-transform: scaleY(.7) translateZ(0); transform: scaleY(.7) translateZ(0) } .photo-gallery__corner { position: absolute; z-index: 1; bottom: 0; left: 72px; padding: 30px 60px 30px 0 } .photo-gallery__corner_ { position: relative; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15); border-radius: 16px; background: rgba(0, 0, 0, .5); font-family: 'FS Albert Pro Web Bold', Helvetica, Arial, sans-serif; transition: border-radius .15s .25s } .photo-gallery__video-button { position: absolute; z-index: 1; bottom: 25px; left: 30px } .photo-gallery__video-button.hidden + .photo-gallery__corner { left: 0; padding: 30px 60px 30px 30px } .photo-gallery__counter { margin: 0 15px; height: 32px; text-align: center; color: #fff; white-space: nowrap; transition: margin .15s .25s, opacity .15s .25s } .photo-gallery__counter .icon { margin: 0 0 -3px } .photo-gallery__miniatures-wrap { overflow: hidden; transition: width .15s .25s, height .15s .25s } .photo-gallery__miniatures { position: relative; display: inline-block; font-size: 0; white-space: nowrap } .photo-gallery__photos-wrap { vertical-align: middle; display: inline-block; overflow: hidden; max-width: 270px } .photo-gallery__photos { position: relative } .photo-gallery__photos.animated { transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } .photo-gallery__photos-item { position: relative; display: inline-block; overflow: hidden; margin: 6px 3px; width: 48px; height: 48px } .photo-gallery__photos-item:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .5; background: rgba(0, 0, 0, 1); transition: opacity .15s } .photo-gallery__photos-item:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .1; border: 1px solid #fff; transition: opacity .15s } .photo-gallery__photos-item:hover:before, .photo-gallery__miniatures-wrap:hover .photo-gallery__photos-item.active:before { opacity: 0 } .photo-gallery__photos-item:hover:after { opacity: .05 } .photo-gallery__miniatures-wrap:hover .photo-gallery__photos-item.active .b-link { display: none } .photo-gallery__photos-item > img { width: 48px; height: 48px } .photo-gallery__photos-item > .icon { position: absolute; bottom: 3px; left: 1px } .photo-gallery__photos-stub { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-weight: 400; font-size: 14px; text-align: center; color: #fff } .mm_show_not_moderated_photos .photo-gallery__photos-item--not-moderated .photo-gallery__photos-stub { display: none } .mm_show_not_moderated_photos .photo-gallery__photos-item--not-moderated > img { -webkit-filter: none; filter: none } .photo-gallery__photos-item--private > img, .photo-gallery__photos-item--not-moderated > img { -webkit-filter: blur(5px); filter: blur(5px) } .photo-gallery__prev-page, .photo-gallery__next-page { position: relative; vertical-align: middle; display: inline-block; opacity: .7; overflow: hidden; margin: 6px 0; width: 0; transition: opacity .15s } .photo-gallery__prev-page { margin-right: 3px } .photo-gallery__next-page { margin-left: 3px } .photo-gallery__prev-page .icon, .photo-gallery__next-page .icon { display: block; margin: 16px 0 } .photo-gallery__prev-page:hover, .photo-gallery__next-page:hover { opacity: 1 } .gallery_has_arrows .photo-gallery__prev-page { margin-left: 6px; width: auto } .gallery_has_arrows .photo-gallery__next-page { margin-right: 6px; width: auto } .mm_has_gallery .photo-gallery__corner:hover .photo-gallery__corner_ { border-radius: 6px; background: rgba(0, 0, 0, .7); transition-delay: 0 } .photo-gallery__counter.move { opacity: 0; margin-bottom: -32px; transition-delay: 0 } .mm_has_gallery .photo-gallery__corner:hover .photo-gallery__miniatures-wrap { transition-delay: 0; will-change: width, height } .score-user__txt { margin: 0 0 0 17px; width: 145px } .score-user__txt b { white-space: nowrap } .score-user__txt--top { vertical-align: top } .score-user__btns { margin: 10px 0 0 } .verification-methods__item { position: relative } .verification-methods__item:not(:last-child) { margin: 0 0 20px } .verification-methods__item:hover .verification-methods__title { color: #4d4d4d } .verification-methods__item:hover .verification-methods__message--action { border-color: #2b65f8; color: #2b65f8 } .verification-methods__item:hover .verification-methods__icon--arrow { color: #2b65f8 } .verification-methods__item.is-blocked { pointer-events: none } .verification-methods__item--photo-verify + .verification-methods__item { margin-top: 30px } .verification-methods__item--photo-verify::after { content: '+'; position: absolute; bottom: -26px; left: 0; width: 32px; font-size: 24px; line-height: 1.167; text-align: center; color: #999; pointer-events: none } .verification-methods__item--linked .verification-methods__title { color: #4d4d4d } .verification-methods__item-inner { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .verification-methods__logo { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .verification-methods__logo > .icon { vertical-align: top } .verification-methods__logo--google + .verification-methods__txt .verification-methods__title { direction: ltr; unicode-bidi: embed } .verification-methods__txt { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 10px; max-width: 155px; line-height: 1.143 } .verification-methods__title { font-size: 1em; color: #999 } .verification-methods__message { vertical-align: top; display: inline-block; overflow: hidden; margin: 1px 0 0; max-width: 100%; color: #bfbfbf; white-space: nowrap; text-overflow: ellipsis } .verification-methods__message--action { border-bottom: 1px solid rgba(77, 77, 77, 0.3); cursor: pointer; color: #4d4d4d; transition: color .2s, border-color .2s } .verification-methods__icon { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .verification-methods__icon--arrow { color: #bfbfbf } .verification-methods--line { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex } .verification-methods--line .verification-methods__item { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; width: 100px; padding: 0 5px } .verification-methods--line .verification-methods__item--plus { margin: 0; width: 30px; height: 60px; line-height: 60px } .verification-methods--line .verification-methods__item--photo-verify { margin-right: 10px; margin-bottom: 0 } .verification-methods--line .verification-methods__item--photo-verify::after { top: 0; right: -15px; left: auto; width: 20px; height: 64px; line-height: 64px } .verification-methods--line .verification-methods__item-inner { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .verification-methods--line .verification-methods__txt { display: block; margin: 10px 0 0 } .verification-methods--box { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .verification-methods--box .verification-methods__item { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 15px; width: 100px; padding: 0 5px } .verification-methods--box .verification-methods__item--plus { margin: 0; width: 30px; height: 60px; line-height: 60px } .verification-methods--box .verification-methods__item--photo-verify::after { top: 0; right: -10px; left: auto; width: 20px; height: 64px; line-height: 64px } .verification-methods--box .verification-methods__item-inner { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .verification-methods--box .verification-methods__txt { display: block; margin: 10px 0 3px 0 } .verification-methods--digest .verification-methods__item:not(:last-child) { margin-bottom: 10px } .social-network-settings { position: relative; margin: 0 -30px } .social-network-settings_ { position: relative; margin: 15px 0 0; border-top: 1px solid rgba(0, 0, 0, .15); border-bottom: 1px solid rgba(0, 0, 0, .15); padding: 15px 30px; background: #eee } .social-network-settings_::before { content: ''; position: absolute; z-index: 1; top: -5px; right: 42px; opacity: 1; margin: 0 0 0 -3px; border: 1px solid; border-color: rgba(0, 0, 0, .15) transparent transparent rgba(0, 0, 0, .15); width: 6px; height: 6px; background: #eee; cursor: default; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: opacity .2s linear } .social-network-settings__radio { margin: -5px 0 10px } .entry-points { margin: -5px 0 -1.3572em; text-align: justify } .entry-points:after { content: ''; display: inline-block; width: 100%; font-size: 0 } .entry-point { position: relative; display: inline-block; text-align: center } .entry-point:hover b { color: #2b65f8; transition: color .2s } .entry-point__icon { margin: 0 0 -3px; height: 60px } .entry-point--off > .entry-point__icon { opacity: .4; transition: opacity .2s } .entry-point--off:hover > .entry-point__icon { opacity: 1 } .entry-point__icon > .icon { margin: 5px; width: 50px; height: 50px } .entry-point__mark { display: inline-block; margin: 0 3px 1px 0 } .location-map { position: relative; overflow: hidden; margin: 15px 0 0; border-radius: 3px; height: 240px; transition: all .2s linear } .hide .location-map { opacity: 0; margin: 0; height: 0 } .location-map--static { margin: 5px 0 0; height: 160px; text-align: center } .location-map--static:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(77, 77, 77, .1); border-radius: 3px } .location-map__real { border: 1px solid rgba(77, 77, 77, .2) } .location-map__cached, .location-map__real { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 3px; width: 100%; height: 100% } .location-map__cached > img { position: absolute; top: -500px; right: 0; bottom: -500px; left: 0; margin: auto; width: 100%; height: auto } .location-map__layer { position: relative; vertical-align: middle; display: inline-block; border-radius: 4px; width: 256px; padding: 15px; background: rgba(255, 255, 255, .9) } .location-map__btn { margin: 5px 0 0 } .location-map__radius { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border: 1px solid rgba(31, 114, 242, .35); border-radius: 50%; width: 150px; height: 150px; background: rgba(43, 101, 248, .1) } .location-map__radius--sm { width: 120px; height: 120px } .location-map__radius--bumped { border-color: rgba(153, 69, 230, 0.5); background: rgba(153, 69, 230, 0.1) } .location-map__pin { position: absolute; top: 10px; right: 0; bottom: 0; left: 0; margin: auto; width: 48px; height: 48px } .location-map__pin > .icon { margin: -6px 0 0 -6px } .map-tooltip { display: inline-block; margin: -35px 0 0 -13px; width: 26px; height: 60px } .here-maps .map-tooltip {} .google-maps .map-tooltip {} .here-maps .tooltip.active {} .map-canvas { z-index: 1; width: 100%; height: 100% } .here-maps.map-canvas {} .map-zoom { position: absolute; z-index: 2; top: 10px; left: 10px } .map-zoom__slider { position: relative; margin: 20px 0; width: 20px; height: 127px; background: url() 0 -23px no-repeat; cursor: pointer } .map-zoom__in, .map-zoom__out { position: absolute; top: -23px; left: 0; width: 20px; height: 23px; background: url() 0 0 no-repeat } .map-zoom__out { top: 100%; background-position: 0 -295px } .map-zoom__dash { position: absolute; top: 3px; left: 1px; width: 20px; height: 118px } .map-zoom__dash-it { position: absolute; left: 7px; border-top: 1px solid #aaa; width: 2px; height: 1px } .map-zoom__scale { position: relative; top: -2px; width: 18px; height: 130px } .map-zoom__scale-me { position: relative; left: 1px; display: inline-block; width: 18px; height: 12px; background: url() 0 -318px no-repeat } .profile-questions__counters { margin: 0 0 8px } .profile-questions__counter { position: relative; vertical-align: middle; display: inline-block } .profile-questions__counter:hover { opacity: .8 } .profile-questions__counter-number { vertical-align: middle; display: inline-block; font-size: 2.286em } .profile-questions__counter-txt { vertical-align: middle; display: inline-block; margin: 0 0 0 5px; width: 68px; font-size: .8571em; line-height: 1.3334 } .profile-questions__action { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .profile-questions__action-icon { -webkit-flex: none; -ms-flex: none; flex: none } .profile-questions__action-message { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-left: 10px } .profile-questions__action-message:only-child { margin-left: 0 } .profile-questions__action-message + .profile-questions__action-btn { margin-left: 10px } .profile-questions__action-btn { -webkit-flex: none; -ms-flex: none; flex: none } .banner-container { vertical-align: top; display: inline-block; opacity: 1; visibility: visible; transition: height .6s, opacity .2s .4s, visibility .2s .4s } .banner-container:empty { display: none } .banner-container.animated { opacity: 0; visibility: hidden; transition: height .6s, opacity .2s, visibility .2s } .banner-container--wide { display: block; margin: 20px 30px 0 } .banner-container--wide .banner-buttons { min-width: 195px } .section-header--folder ~ .banner-container--wide { margin-top: 0 } .section-header-fixed ~ .banner-container--wide { margin-top: 100px } .banner-card { position: relative; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 7px #262b37; width: 64px; height: 78px } .banner-card__img { overflow: hidden; width: 100%; height: 100%; -webkit-backface-visibility: hidden } .banner-card__img > img { margin: 0 0 0 -7px; width: 78px; height: 78px } .banner-cards { position: relative } .banner-cards .brick { position: absolute; box-shadow: 0 0 0 2px #fff } .banner-balloons { position: relative; overflow: hidden; margin: 0 0 0 -30px; width: 205px; height: 100px } .banner-balloon { position: absolute; border-radius: 50%; font-size: .857em; text-align: center; color: #fff } .banner-balloon__txt { display: block; font-size: 2.833em; line-height: 1.236em } .banner-balloon__txt-small { display: inline-block; width: 60px } .banner-balloon--red { top: 19px; left: 10px; width: 88px; height: 88px; padding: 11px 0 0; background: linear-gradient(rgba(255, 99, 170, .9), rgba(255, 49, 49, .9)) } .banner-balloon--blue { bottom: 16px; left: 60px; width: 138px; height: 138px; padding: 52px 0 0; background: linear-gradient(#02b8f3, #2b65f8) } .banner-balloon--red .banner-balloon__txt:after { content: '='; position: absolute; top: 1px; right: 2px } .promo-banner { position: relative; margin: 5px 0; border-radius: 5px; width: 190px; padding: 20px; text-align: center } .promo-banner::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 5px; transition: box-shadow .2s ease-in-out } .promo-banner:hover::after { box-shadow: 0 2px 3px rgba(0, 0, 0, .1) } .promo-banner__title { font-size: 1.143em; line-height: 1.125 } .promo-banner__user { position: relative; display: inline-block; margin: 0 0 25px } .promo-banner .btn { position: static; display: block } .promo-banner__txt { margin: 0 0 25px; max-width: 148px; word-wrap: break-word } .promo-banner__txt b { font-weight: 700 } .promo-banner .brick + .brick { margin-left: 0 } .promo-banner .brick-group--promo > .brick + .brick { margin-left: -15px } .promo-banner .bricks-line--sm > .brick + .brick { margin-left: -5px } .promo-banner .brick-group { margin: 0 -20px } .promo-banner .brick > .brick { box-shadow: 0 0 0 2px #fff } .promo-banner__cost { margin: 10px 0 -10px; font-size: .8571em; line-height: 1.3334; text-align: center; color: #bfbfbf } .promo-banner--liked-you .promo-banner__user { margin-right: -21px; margin-left: -21px } .promo-banner__user--popularity { padding-bottom: 43px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAsAgMAAAC4URiwAAAADFBMVEUAAAAAol4Aol4Aol6fvFNyAAAAA3RSTlMAw8SGqEb6AAAAS0lEQVQokWNgQAKMDsg8BuYDDAGo3A/YuBBdcC6QQR6XFZXLTww3AJX7gTpcxgYULggQ4gK1IHMhBN24bKhchoHlJqByGQhzE1B4ADn2Wx97IPCVAAAAAElFTkSuQmCC') no-repeat 50% 100% } .promo-banner--mobile .promo-banner__btns { margin: 0 -10px } .promo-banner--mobile .promo-banner__btns .btn { position: relative; overflow: hidden; margin-left: 0 } .promo-banner--encounters2 .promo-banner__user > .brick:first-child, .promo-banner--add-photos .promo-banner__user > .brick:first-child { z-index: 1 } .promo-banner--encounters2 .brick + .brick, .promo-banner--add-photos .brick + .brick { position: absolute; top: 0; left: -50px } .promo-banner--encounters2 .brick:nth-child(3), .promo-banner--add-photos .brick:nth-child(3) { right: -50px; left: auto } .promo-banner--inbox-full .banner-card:nth-child(2) { z-index: 1 } .promo-banner--inbox-full .banner-card:first-child { position: absolute; top: 10px; left: -48px; -webkit-transform: rotate(-9deg); transform: rotate(-9deg) } .promo-banner--inbox-full .banner-card:last-child { position: absolute; top: 10px; right: -48px; -webkit-transform: rotate(9deg); transform: rotate(9deg) } .promo-banner--inbox-full .banner-cards .brick { bottom: -5px } .promo-banner--favourite .brick + .brick, .promo-banner--spotlight .brick + .brick, .promo-banner--first-contact .brick + .brick { left: -40px } .promo-banner--favourite .brick + .brick:nth-child(3), .promo-banner--spotlight .brick + .brick:nth-child(3), .promo-banner--first-contact .brick + .brick:nth-child(3) { right: -40px; left: auto } .promo-banner--boost .promo-banner__imgs { position: relative; overflow: hidden; margin: -19px -19px 10px -19px; border-radius: 5px 5px 0 0 } .promo-banner--boost .promo-banner__imgs img { margin: 0 0 2px 0; width: 93px; height: 93px } .promo-banner--boost .promo-banner__imgs img:nth-child(2n-1) { margin-right: 2px } .promo-banner--boost .brick { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .promo-banner--bundle .brick--xlg { width: 80px; height: 80px } .banner { position: relative; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 6px; width: 100%; height: 100px; padding: 0 30px } .banner--profile { border-top: 1px solid rgba(26, 36, 57, .15) } .banner-promo, .banner-buttons { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .banner-buttons { padding-left: 15px; text-align: right } .banner-content { z-index: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto } .banner-text { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; margin: 0 20px; min-width: 200px; max-width: 365px } .banner .brick > .brick { box-shadow: 0 0 0 2px #fff } .banner .brick-group { width: 175px } .banner .banner-promo .brick:only-child { margin-right: 23px } .banner .banner-promo .brick:only-child > .brick { right: -10px } .banner--encounters { background: rgba(0, 202, 168, 0.12) } .banner--blue { background: rgba(43, 101, 248, 0.12) } .banner--lgrey { background: rgba(154, 169, 197, 0.12) } .chat-text{ color: #333; font-size: 15px; } .banner--delivery { background: rgba(43, 101, 248, 0.12) } .banner--spotlight { background: rgba(43, 140, 252, 0.12) } .banner--favourite { background: rgba(254, 195, 9, 0.12) } .banner--spp { background: rgba(254, 195, 9, 0.12) } .banner--like { background: rgba(240, 33, 57, 0.12) } .banner--attention { background: rgba(255, 130, 0, 0.12) } .banner--newbie { background: rgba(134, 195, 19, 0.12) } .banner--riseup { background: rgba(41, 207, 41, 0.12) } .banner--invisibility { background: rgba(30, 178, 252, 0.12) } .banner--like { overflow: hidden } .banner--like .brick-group { margin: 0 0 0 -30px; width: 205px } .banner--like .brick-group .brick:first-child { margin-left: -5px } .banner--like .brick + .brick { margin-left: 4px } .banner--like .brick > .brick { right: -4px } .banner--spp .brick-group > .brick + .brick, .banner--attention .brick-group > .brick + .brick, .banner--encounters .brick-group > .brick + .brick, .banner--riseup .brick-group > .brick + .brick { margin-left: -7px } .banner--add-more-photos .brick-group { text-align: center } .banner--add-more-photos .brick-group > .brick:first-child { z-index: 1 } .banner--add-more-photos .brick-group .brick + .brick { position: absolute; left: 0; margin-left: 0 } .banner--add-more-photos .brick-group > .brick:last-child { right: 3px; left: auto } .banner--spotlight .brick-group > .brick + .brick { margin-left: -8px } .banner--favourite .brick-group > .brick + .brick, .banner--newbie .brick-group > .brick + .brick, .banner--find-friends .brick-group > .brick + .brick { margin-left: -12px } .banner .banner-cards { overflow: hidden; margin: 0 0 0 -30px; width: 205px; height: 100px } .banner .banner-card { position: absolute } .banner .banner-card:first-child { top: -12px; left: 14px; -webkit-transform: rotate(-13deg); transform: rotate(-13deg) } .banner .banner-card:nth-child(2) { top: 10px; left: 61px; -webkit-transform: rotate(6deg); transform: rotate(6deg) } .banner .banner-card:nth-child(3) { top: 40px; left: 110px; -webkit-transform: rotate(20deg); transform: rotate(20deg) } .banner .banner-cards .brick { top: 30px; right: 10px } .banner-app { display: inline-block; min-width: 100px; padding: 0 5px; text-align: center } .banner-app_ { position: relative; display: inline-block; overflow: hidden } .banner-app__title { display: block; font-size: .857em; color: #999; white-space: nowrap } .banner-app_:hover .banner-app__title { color: #4d4d4d } .banner-buttons > .btn { position: static } .banner--mobile .banner-buttons .btn { position: relative } .section { position: relative; overflow: hidden } .section h2 { display: inline-block } .section > .select { float: right; width: auto } .section .section__fill-status { display: none; margin: 0 0 0 10px } .section.active .section__fill-status { display: inline } .section.active { overflow: visible; margin-bottom: 0; border-bottom: 0 } .section--profile.active:before { border: 0 } .section.active .section-editable { margin: 15px -40px 0; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 15px 40px; background: #f7f7f7 } .section.active .section-editable__edit { display: block } .section.active .form-row.section-editable__edit { display: -webkit-flex; display: -ms-flexbox; display: flex } .section-editable__edit, .section.active .section-editable__view, .section.active .section-editable__edit + .form-label { display: none } .section__separate { margin: 10px 0; border-top: 1px solid rgba(0, 0, 0, .15) } .section__btn { opacity: 0; margin: -2px 0 0 7px } .section:hover .section__btn, .section.hover .section__btn, .section.active .section__btn { opacity: 1 } .section .section__btn:after { content: ''; position: absolute; top: auto; bottom: -26px; left: 50%; display: none; margin: 0 0 0 -6px; width: 12px; height: 12px; background: #f7f7f7; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: opacity .2s linear } .section.active .section__btn:after { display: block; border-width: 1px; border-style: solid; border-color: #dddfe1 transparent transparent #dddfe1 } .section.active .section__btn .b-link { top: 0; right: 0; bottom: 0; left: 0 } .section__expand { position: absolute; z-index: 1; top: 30px; right: 40px } .section__expand-lnk--show, .hide .section__expand-lnk--hide { display: none } .hide .section__expand-lnk--show { display: inline } .photo-ovl { position: absolute; z-index: 9; top: 0; bottom: 0; opacity: 0; visibility: hidden; width: 100%; max-height: 1000px; text-align: center; transition: opacity .15s linear, visibility .15s linear } .photo-ovl-frame { vertical-align: middle; display: inline-block } .photo-ovl-fade { position: absolute; z-index: 8; top: 0; bottom: 0; opacity: 0; visibility: hidden; width: 100%; background: #000; transition: margin-bottom .12s linear, opacity .15s linear, visibility .15s linear } .photo-ovl__title { margin-top: 20px; color: #fff } .photo-ovl__title > b { display: block } .photo-ovl-ico { display: inline-block; width: 64px; height: 64px } .photo-ovl-ico--trash { background: url() no-repeat 50% 0 } .photo-delete .photo-ovl--deleted { opacity: 1; visibility: visible } .photo-delete .photo-ovl-fade { opacity: .6; visibility: visible } .mm_profile_visible .photo-ovl-fade { margin-bottom: 0 } .undo { margin: 28px 0 0 } .next__users { position: relative; z-index: 1; overflow: hidden; border-radius: 27px; min-height: 108px; } .next__users:before { content: ''; position: absolute; z-index: 1; right: 0; bottom: -1px; left: 0; margin: 0 auto; border-radius: 50%; width: 44px; height: 22px; } [contenteditable=true]:empty:before{ color: #ccc; content: attr(placeholder); display: block; /* For Firefox */ white-space: pre-wrap; } .next__users_.animated { transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } .next__users_.animated .brick--outline:before { -webkit-animation: hide .25s; animation: hide .25s } .new-chat-border{ border-color: #ff0000 !important; } .next__users_ > div:nth-child(n+6) { display: none } .undo__user > .brick-wrap { margin: 0 0 10px } .undo__user .brick--xsm { box-shadow: 0 0 0 2px #eee } .undo__user .b-link { top: -35px; right: -11px; bottom: -15px; left: -11px; border-radius: 22px 22px 0 0 } .undo__user .brick-txt { margin: 13px -8px 0; width: 60px; white-space: nowrap } .undo__user .tooltip { z-index: 0 } .undo__user .tooltip-no-js-wrap:hover .tooltip { margin-bottom: 2px } @media screen and (max-width:1600px) { .undo__user--with-icon .tooltip { right: 50%; left: auto; margin-right: -16px; margin-left: -292px; text-align: right; -webkit-transform: translateX(0); transform: translateX(0) } .undo__user--with-icon .tooltip-txt:before { right: 12px; left: auto } } .prev-next { margin: 63px 0 0 0 } .prev-next__btn { color: #4f4f4f } .prev-next__btn:hover { color: #2b65f8 } .prev-next__users { position: relative; z-index: 1; overflow: hidden; border-radius: 27px; max-height: 270px } .prev-next__users_.animated { transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } @media screen and (max-width:1355px) { .undo, .prev-next { -webkit-transform: translateX(-10px); transform: translateX(-10px) } } @media screen and (max-width:1295px) { .undo, .prev-next { -webkit-transform: translateX(-30px); transform: translateX(-30px) } .next__users:before, .undo__user .brick-txt { visibility: hidden } } @media screen and (max-width:1145px) { .undo, .prev-next { -webkit-transform: translateX(0); transform: translateX(0) } .next__users:before, .undo__user .brick-txt { visibility: visible } } @media screen and (max-width:1065px) { .undo, .prev-next { -webkit-transform: translateX(-10px); transform: translateX(-10px) } } @media screen and (max-width:1015px) { .undo, .prev-next { -webkit-transform: translateX(-30px); transform: translateX(-30px) } .next__users:before, .undo__user .brick-txt { visibility: hidden } } .awards-list { margin: -10px 0 0 } .awards-list + .btn { margin-top: 15px } .awards-item { position: relative; display: inline-block; margin: 10px 0 0 } .awards-item--empty .awards-item__txt { vertical-align: top } .awards-item__txt { margin-left: 17px; width: 145px } .awards-item__action { display: none } .awards-item__action > .checkbox { margin: 10px 0 } .awards-item__action > .checkbox > .blocker { display: block } .awards-list--compact { margin-right: -13px } .awards-list--compact .awards-item__txt { display: none } .awards-list--compact .awards-item { margin-right: 13px } .award { position: relative; display: inline-block; margin: 5px 0 } .award.active { cursor: pointer } .award.inactive { opacity: .4 } .ovl-awards { text-align: left } .ovl-awards .ovl-scroll { height: 450px; max-height: 450px } .ovl-awards .ovl-scroll_ { padding: 25px 0 0 } .ovl-awards .awards-item { vertical-align: top; display: inline-block; margin: 0 0 20px; width: 20%; min-height: 158px; text-align: center } .awards-item__progress { position: absolute; z-index: 1; top: 5px; right: 0; left: 0; overflow: hidden; margin: 0 auto; border-radius: 50%; width: 90px; height: 90px } .awards-item__progress_ { position: absolute; z-index: 1; bottom: 0; width: 100%; background: #256cf5 } .awards-item__progress_:before { content: ''; display: block; margin: -4px 0 0; width: 100%; height: 8px; background: url() repeat-x -7px 0 / 21px 4px } .awards-item--placeholder { color: rgba(77, 77, 77, .5) } .awards-item--placeholder:before { content: ''; vertical-align: top; display: inline-block; margin: 5px 0; border-radius: 50%; width: 90px; height: 90px; background: #e6ecf2 } .awards-item--placeholder .award { position: absolute; z-index: 2; top: 5px; right: 0; left: 0; margin: 0 auto } .awards-item__description, .awards-item__title { position: absolute; width: 100%; transition: opacity .2s } .awards-item__description { margin: 2px 0 0; font-size: .857em } .awards-item__description, .awards-item--placeholder:hover .awards-item__title { opacity: 0 } .awards-item--placeholder:hover .awards-item__description { opacity: 1 } .interests-choose__title { position: relative; display: inline-block; margin: 10px 0 5px 15px; color: #7a818c; text-decoration: underline; transition: color .15s } .interests-choose__title > .icon { position: relative; top: 1px; margin: 0 0 -3px 5px } .interests-choose__title:hover { color: #2b65f8 } .profile-intr-list { opacity: 0; overflow: hidden; height: 0; transition: height .2s linear, opacity .2s cubic-bezier(.165, .84, .44, 1) } .interests-choose.active .profile-intr-list { opacity: 1; height: 442px } .intr-list { position: relative; margin: 10px 0 15px 5px; border: 1px solid #d4d8dd; border-radius: 16px; padding: 15px 20px; background: #fff } .intr-list__item { margin-left: -14px; width: 50% } .intr-list__item.active > .intr-set { display: block } .intr-list__category { border-radius: 16px; padding: 7px 15px 8px; cursor: pointer; line-height: 1.143 } .intr-list__category:hover, .intr-set__item > a:hover { color: #2b65f8; text-decoration: underline } .intr-list__item.active .intr-list__category { background: #256cf5; cursor: default; color: #fff } .intr-list__item.active .intr-list__category:hover { text-decoration: none } .intr-list__category > .icon { margin: 1px 8px -3px 0 } .intr-set { position: absolute; top: 15px; right: 15px; bottom: 15px; left: 50%; display: none } .intr-set__item { padding: 8px 0; line-height: 1.143 } .intr-set__item--more { position: relative; text-decoration: underline } .intr-set__item--more:first-child { display: none } .intr-set__item--more:hover { color: #256cf5 } .intr-set__item--more > .icon { margin: 0 5px -4px 0 } .intr-label { display: inline-block; overflow: hidden; margin: 0 0 15px 0; border-radius: 22px; max-width: 100%; padding: 10px 20px; background: #f7f7f7; font-size: 1.429em; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis } .intr-category { vertical-align: top; display: inline-block; width: 246px; padding: 0 10px 0 20px; text-align: left } .intr-category:first-child .intr-category__col { float: right } .intr-category:last-child .intr-category__col { float: left } .photo-list { position: relative; width: 100%; height: 150px; } .ig { background: -webkit-radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -webkit-linear-gradient(315deg, #234bd7 12%, #c33cbe 58%) !important; background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%) !important; } .photo-list:before, .photo-list:after { content: ''; position: absolute; z-index: 2; left: 0; display: none; width: 100%; height: 1px; background: rgba(26, 36, 57, .15) } .photo-list:before { top: 0 } .photo-list:after { bottom: 0 } .profile-section__photo-list .photo-list:before, .profile-section__photo-list .photo-list:after { display: block } .photo-list__action-bar .photo-list__item--add-photos, .photo-list--video .photo-list__item--add-videos { display: inline-block; } .photo-list__action-bar .photo-list__item { display: none; } .photo-list__item { position: relative; vertical-align: top; display: inline-block; width: 150px; height: 150px; } .photo-list__action { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; display: none; text-align: center; color: rgb(255, 255, 255); white-space: normal; background: rgba(51, 51, 51, 0.8); } .photo-list__counter { position: absolute; right: 10px; bottom: 10px } .photo-list__arrow-l, .photo-list__arrow-r { position: absolute; top: 0; bottom: 0; display: none; margin: auto; height: 42px } .gallery_has_arrows .photo-list__arrow-l { left: 10px; display: block } .gallery_has_arrows .photo-list__arrow-r { right: 10px; display: block } .photo-list__action-bar { float: left; overflow: hidden; height: 150px; transition: width .25s } .photo-list--upload .photo-list__action-bar--application { width: 300px } .photo-list__photo-bar { position: relative; overflow: hidden; height: 150px; background: #2d3238 } .photo-list__action-bar + .photo-list__photo-bar { background: url() top left repeat } .photo-list__no-photos { width: 100%; text-align: center; color: #7a818c } .photo-list__slide { position: relative; left: 0; display: inline-block; min-width: 100%; height: 100%; white-space: nowrap; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .photo-list__slide.animated { transition: left .5s, margin .5s, -webkit-transform .5s; transition: transform .5s, left .5s, margin .5s; transition: transform .5s, left .5s, margin .5s, -webkit-transform .5s } .photo-list__item { position: relative; vertical-align: top; display: inline-block; width: 150px; height: 150px } .photo-list__action-bar .photo-list__item { display: none } .photo-list__action-bar .photo-list__item--add-photos, .photo-list--video .photo-list__item--add-videos { display: inline-block } .photo-list--video-progress .photo-list__item--add-videos { display: none } .photo-list--video-progress .photo-list__item--video-progress { display: inline-block } .photo-list__img_ { position: relative; display: block; opacity: .9; overflow: hidden; width: 150px; height: 150px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAGBAMAAAAmmzNnAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMA+J4KB1MKeAAAACJJREFUCNdjMBJUZmBAIlVcnIAsBCni4ghkwUl0Prp6dPMA3ScJ90t0OagAAAAASUVORK5CYII=') no-repeat center center; cursor: pointer } @media only screen and (-webkit-min-device-pixel-ratio:1.25) { .photo-list__img_ { outline: 1px solid transparent } } .photo-list__item:hover .photo-list__img_ { opacity: 1 } .photo-list__img { position: absolute; top: -500px; right: -500px; bottom: -500px; left: -500px; margin: auto } .photo-list__item--private .photo-list__img, .photo-list__item--not-moderated .photo-list__img { width: 160px; height: 160px; -webkit-filter: blur(5px); filter: blur(5px) } .photo-list__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center } .photo-list__video { margin: 45px; border-radius: 100%; width: 60px; height: 60px; padding: 14px; background: rgba(0, 0, 0, .5) } .photo-list__item:hover .photo-list__video { background: #000 } .photo-list__action { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background: rgba(51, 51, 51, .8); text-align: center; color: #fff; white-space: normal } .photo-list__action--blue { background: rgba(37, 108, 245, .8) } .photo-list__action .icon { vertical-align: top } .photo-list__photo-bar .photo-list__action .icon, .photo-list__photo-bar .photo-list__action-title { opacity: .7 } .photo-list__photo-bar .photo-list__action--add-photos .icon { opacity: .3 } .photo-list__item:hover .photo-list__action .icon, .photo-list__item:hover .photo-list__action-title { opacity: 1 } .photo-list__action-bar .photo-list__action, .photo-list__item--delete .photo-list__action--delete, .photo-list__item--send .photo-list__action--send, .photo-list__action--facebook, .photo-list__action--instagram, .photo-list__action--private, .photo-list__action--not-moderated, .photo-list__action--add-photos { display: block } .photo-list__action--private { z-index: 3; background: rgba(112, 55, 192, .7) } .photo-list__action-bar .photo-list__action--add-photos { background: #1f72f2 } .photo-list__action-bar .photo-list__action--add-photos:hover { background: #1c68d9 } .photo-list__action-bar .photo-list__action--add-videos, .photo-list__action-bar .photo-list__action--video-progress { background: #3674a9 } .photo-list__action-bar .photo-list__action--add-videos:hover { background: #2e618f } .photo-list__photo-bar .photo-list__action--add-photos { background: transparent } .photo-list__photo-bar .photo-list__action--add-photos:hover { background: #bfbfbf } .photo-list--video-progress .photo-list__action--video-progress .loader { position: relative; margin: 17px auto 9px } .photo-list__action_ { max-width: 100% } .photo-list__action-title { display: block; padding: 10px 5px 0 } .photo-list__action.photo-list__action--blue .icon, .photo-list__action--blue .photo-list__action-title { opacity: 1 } .photo-list__nav { position: absolute; z-index: 2; top: 5px; right: 10px; left: 0; cursor: pointer; text-align: left; white-space: normal } .photo-list__nav-action { float: right; visibility: hidden; text-align: right } .photo-list__img_:hover + .photo-list__nav > .photo-list__nav-action, .photo-list__link:hover + .photo-list__nav > .photo-list__nav-action, .photo-list__nav:hover > .photo-list__nav-action, .photo-list__nav-action .btn.hovered { visibility: visible } .photo-list__nav-action .datalist .option { font-size: .889em; line-height: 1.25 } .photo-list__default-photo { display: inline-block } .photo-list__default-photo + .btn { margin-left: 7px } .photo-list__default-photo:not(.active) .btn.active, .photo-list__default-photo.active .btn:not(.active) { display: none } .photo-list__photo-coaching { position: absolute; z-index: 1; right: 10px; bottom: 10px; left: 10px } .photo-list__photo-coaching .photo-coaching { position: absolute; right: 0; bottom: 0; left: 0; margin: auto } .photo-list__photo-coaching .photo-coaching__star { position: relative } .photo-list__item--send .photo-list__nav, .photo-list__item--delete .photo-list__nav, .photo-list__item--delete .photo-list__photo-coaching { display: none } .photo-list__img_:hover + .photo-list__nav + .photo-list__photo-coaching .photo-coaching__star, .photo-coaching--sm:hover .photo-coaching__star { background-position: 0 -39px } .photo-list__photo-coaching .icon { position: relative } .photo-list__photo-coaching .photo-coaching:after, .photo-list__photo-coaching .icon:after { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .photo-list__photo-coaching .icon:after { box-shadow: 0 2px 8px 3px rgba(0, 0, 0, .1); width: 4px; height: 4px } .photo-list__photo-coaching .photo-coaching:after { box-shadow: 0 0 8px 3px rgba(0, 0, 0, .1); width: 100%; height: 0 } .photo-list__private-photo { position: absolute; z-index: 1; bottom: 4px; left: 9px } .photo-list--grid { height: auto; min-height: 600px } .photo-list--grid .photo-list__action-bar { position: absolute; z-index: 1; top: 0; left: 0; width: 150px } .photo-list--grid.photo-list--video .photo-list__action-bar { width: 300px } .photo-list--grid .photo-list__photo-bar { height: auto } .photo-list--grid .photo-list__slide { display: block; white-space: normal; -webkit-transform: none !important; transform: none !important } .photo-list--grid .photo-list__photo-bar .photo-list__item:first-child { margin: 0 0 0 150px } .photo-list--grid.photo-list--video .photo-list__photo-bar .photo-list__item:first-child { margin: 0 0 0 300px } .message-attach .photo-list__photo-bar { width: 430px } .photo-coaching { width: 90px; height: 16px; background: url() 0 0 repeat-x } .photo-coaching--sm { width: 65px; height: 13px; background: url() 0 0 repeat-x } .photo-coaching--empty { background-position: 0 -32px } .photo-coaching--sm.photo-coaching--empty { background-position: 0 -26px } .photo-coaching__star { display: block; width: 0; height: 100%; background: url() 0 -16px repeat-x } .photo-coaching--sm .photo-coaching__star { background: url() 0 -13px repeat-x } .photo-coaching__star--1 { width: 20% } .photo-coaching__star--2 { width: 40% } .photo-coaching__star--3 { width: 60% } .photo-coaching__star--4 { width: 80% } .photo-coaching__star--5 { width: 100% } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .photo-coaching, .photo-coaching__star { background-image: url(); background-size: 18px 48px } .photo-coaching--sm, .photo-coaching--sm .photo-coaching__star { background-image: url(); background-size: 13px 52px } } .upload-area { margin: 25px 0 20px; border: 2px dashed rgba(0, 0, 0, .15); border-radius: 10px; padding: 20px 25px; background: #f7f7f7; background-clip: border-box; transition: background .1s linear, border-color .1s linear } .upload-area.hover { border-color: rgba(0, 0, 0, 0.167); background: rgb(242, 242, 242) } .upload-control.simple, .old-upload .upload-control.html5 { display: none } .old-upload .upload-control.simple { display: inherit } .classic-upload-btn { overflow: hidden } .classic-upload-btn input { position: absolute; top: 0; left: -300px; opacity: 0 } .gift { position: relative; display: inline-block; margin: 5px 0; width: 70px; height: 70px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .gift:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid transparent; border-radius: 100%; transition: border .1s } .gift--framed:before { box-shadow: 0 1px rgba(0, 0, 0, .03); border-radius: 0 } .gift--border:before { border-color: rgba(0, 0, 0, .1); background: #fff } .gift--hover:not(.gift--border):before { border-width: 2px } .gift--hover:hover:before, .gift--hover.active:before { border-width: 2px; border-color: #2b65f8 } .gift > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: opacity .2s, -webkit-filter .2s; transition: filter .2s, opacity .2s; transition: filter .2s, opacity .2s, -webkit-filter .2s } .gift--invisible > img { opacity: .3 } .gift--framed > img { width: 54px; height: 54px } .gift__private { position: absolute; right: 10px; bottom: 15px; padding: 2px 2px 1px; background: #000; font: 700 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #fff } .gift > .brick--xsm { position: absolute; right: -2px; bottom: -7px } .gift > .brick:before { box-shadow: 0 0 0 2px #f7f7f7 } .gift > .btn { position: absolute; z-index: 2; right: 0; bottom: -5px; opacity: 0; visibility: hidden; transition: all .2s } .gift--photo > .btn { right: -10px; bottom: -15px } .gift-add { position: relative } .gift-add__txt { margin: 0 0 0 17px; width: 145px; transition: color .2s } .gift-add:hover .gift-add__txt { color: #2b65f8 } .gift-add .gift > img { opacity: .8 } .gift-add:hover .gift > img { opacity: 1 } .gifts-list { margin: 5px -10px 0 0 } .gifts-list > .gift { margin-right: 10px } .gifts-list > .gift > .btn.active, .gifts-list > .gift:hover > .btn, .gifts-list > .gift.active > .btn { opacity: 1; visibility: visible } .gifts { text-align: left } .gifts__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin: 5px 22px 0 0 } .ie10 .gifts__title > b { display: block } .gifts .tabs__item { margin: 0 0 -1px } .ovl .gifts__content > .scroll { height: 250px; max-height: 250px } .ovl .gifts--by-price .gifts__content > .scroll { height: 300px; max-height: 300px } .gifts__btn { position: relative; display: inline-block; padding: 0 5px } .gifts-roll { margin: -5px -26px 5px 0 } .gifts-roll > .gift { vertical-align: top; display: none; margin: 8px 19px 9px -2px; width: 74px; height: 74px } .gifts-roll > .gift--hover:not(.gift--framed):before { border-radius: 6px } .gifts--all .gift, .gifts--popular .gift.popular, .gifts--romantic .gift.romantic, .gifts--friendship .gift.friendship, .gifts--framed .gift.framed { display: inline-block } .gifts-msg { opacity: 0; overflow: hidden; margin: 0; height: 0; text-align: left; transition: height .3s ease-in-out, margin .3s ease-in-out, opacity .4s ease-in-out } .gifts-msg--visible { opacity: 1; margin: 10px 0 0 0; height: auto } .gifts-msg__counter { float: right; margin: -3px 5px 0 0 } .gifts-msg > .textarea { height: 65px } .single-gift-carousel { position: relative; margin: 30px auto } .single-gift-carousel__arrow { position: absolute; top: 50%; margin: -21px 0 0 } .single-gift-carousel__arrow--left { left: 0 } .single-gift-carousel__arrow--right { right: 0 } .single-gift-carousel__items { position: relative; overflow: hidden; margin: 0 auto; width: 240px; height: 200px; white-space: nowrap } .single-gift-carousel__scroll.active { position: relative; white-space: nowrap; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out } .single-gift-carousel__item { display: inline-block; width: 240px } .secret-comments { margin: 5px 0 0 } .secret-comments__item { position: relative; padding: 10px 0 } .secret-comments > .secret-comments__item:first-child { padding-top: 0 } .secret-comments__icon { width: 40px; height: 40px } .secret-comments__item .secret-comments__icon { margin: 0 } .secret-comments__text { margin: 0 0 0 15px; width: 145px } .secret-comments__text--long { width: 175px } .secret-comments__comment { margin: -2px 0 0 15px } .secret-comments__comment_ { display: block; overflow: hidden; max-height: 38px } @supports (-webkit-line-clamp:2) { .secret-comments__comment_ { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } } .secret-comments__btn { margin: 10px 0 0 } .secret-comments__read-all { margin: 5px 0 0 } .secret-comments__teaser-ico { margin: 0 0 -4px; line-height: 1; transition: opacity .2s } .secret-comments__item:hover .secret-comments__teaser-ico { opacity: .7 } .secret-comments__teaser-ico > .icon { width: 40px; height: 40px } .secret-comments-wrap { margin-top: -40px } .secret-comments-wrap .scroll_ { height: 324px } .secret-comments-wrap .secret-comments { margin: 0 -10px; padding: 15px 0 0 0; text-align: left } .secret-comments-wrap .secret-comments__text { vertical-align: top; display: inline-block; overflow: hidden; width: 440px } .secret-comments-wrap .secret-comments__text > time { display: block; margin: -2px 0 5px } .reported .secret-comments__icon, .reported .secret-comments__text { opacity: .5 } .secret-comments__divider { position: relative; margin: 23px 0; text-align: center } .secret-comments__divider > span { position: relative; display: inline-block; padding: 0 15px; background: #fff } .secret-comments__divider:before { content: ''; position: absolute; top: 10px; right: 0; left: 0; border-top: 1px solid #d9d9d9 } .secret-comments__action { position: absolute; top: 4px; right: -10px; opacity: 0; visibility: hidden; transition: opacity .15s linear, visibility linear .15s } .reported .secret-comments__action, .secret-comments__item:hover .secret-comments__action { opacity: 1; visibility: visible } .reported .secret-comments__report, .secret-comments__reported { display: none } .reported .secret-comments__reported { display: inline-block } .secret-comments__delete, .secret-comments__report { cursor: pointer } .secret-comments__icon--new::after { content: ''; position: absolute; top: 0; right: 0; left: auto; display: block; border: 2px solid #fff; border-radius: 50%; width: 8px; height: 8px; background: #f02139 } .secret-comments__prompt { height: 326px; text-align: center } .secret-comments__prompt-txt { margin: 45px auto 0; width: 350px } .secret-comments__form-wrap { margin: 0 -40px -20px; border-top: 1px solid #d9d9d9; padding: 15px 30px 0; text-align: left } .secret-comments__form-wrap .secret-comments__icon { float: left } .secret-comments__textarea { overflow: hidden; padding-left: 10px } .secret-comments__textarea .textarea { min-height: 32px } .secret-comments__textarea .char-counter { float: right; margin: 0 5px 0 0; font-size: .786em; color: #aaadb2 } .secret-comments__vote .btn-group { margin: 0 0 0 15px } .secret-comments__follow { margin: 10px 0 0 } .secret-comments__form, .secret-comments__vote, .secret-comments__form-wrap--vote .secret-comments__thanks { display: none } .secret-comments__form, .secret-comments__vote, .secret-comments__thanks { -webkit-animation: show .2s linear; animation: show .2s linear } .secret-comments__form-wrap--form .secret-comments__form, .secret-comments__form-wrap--vote .secret-comments__vote, .secret-comments__thanks { display: block } .upload-site { position: relative; vertical-align: top; display: inline-block; margin: 0 32px 0 0; max-width: 64px } .upload-site:last-child { margin: 0 } .upload-site__txt { margin: 0 -10px } .upload-site:hover .upload-site__txt { color: #2b65f8 } .icon--google + .upload-site__txt { direction: ltr; unicode-bidi: embed } .profile-photo-import { width: 900px; height: 180px; padding: 30px 20px; text-align: center } .profile-photo-import .upload-site__txt { font-size: .786em } @-webkit-keyframes contact-show { 0% { top: 20px; opacity: 0 } 100% { top: 0; opacity: 1 } } @keyframes contact-show { 0% { top: 20px; opacity: 0 } 100% { top: 0; opacity: 1 } } @-webkit-keyframes heartbeat { 0% { opacity: 0 } 10% { opacity: 1 } 50% { opacity: 1 } 60% { opacity: 0 } 100% { opacity: 0 } } @keyframes heartbeat { 0% { opacity: 0 } 10% { opacity: 1 } 50% { opacity: 1 } 60% { opacity: 0 } 100% { opacity: 0 } } .contacts-wrap { position: absolute; top: 70px; right: 0; bottom: 0; left: 0; overflow: hidden; transition: top .2s linear } .contacts.contacts--animation > .contacts__item, .contacts.contacts--animation .contacts__hint { -webkit-animation: contact-show .5s; animation: contact-show .5s } .contacts__item { position: relative; opacity: 1; height: 80px; padding: 10px 20px; transition: background .15s linear, opacity .15s linear .15s, height .15s linear, padding .15s linear } .contacts__item:hover { background: #f7f7f7 } .contacts__item.hide { opacity: 0; overflow: hidden; height: 0; padding-top: 0; padding-bottom: 0; transition-delay: .15s } .contacts__item.current { background: #4d4d4d } .contacts__item--blue.current { background: rgb(39, 91, 223) } .contacts__item--orange.current { background: rgb(230, 117, 0) } .contacts__item--yellow.current { background: rgb(229, 176, 8) } .contacts__item--grass.current { background: rgb(121, 176, 17) } .contacts__item--lime.current { background: rgb(37, 186, 37) } .contacts__item--aqua.current { background: rgb(0, 182, 151) } .contacts__item--sky.current { background: rgb(36, 176, 221) } .contacts__item--lblue.current { background: rgb(39, 126, 227) } .contacts__item--red.current { background: rgb(216, 30, 51) } .contacts__item--pink.current { background: rgb(221, 74, 115) } .contacts__item.current .contacts__name, .contacts__item--blue.current .contacts__txt, .contacts__item--orange.current .contacts__txt, .contacts__item--yellow.current .contacts__txt, .contacts__item--grass.current .contacts__txt, .contacts__item--lime.current .contacts__txt, .contacts__item--aqua.current .contacts__txt, .contacts__item--sky.current .contacts__txt, .contacts__item--pink.current .contacts__txt, .contacts__item--lblue.current .contacts__txt { color: #fff } .contacts__item--pink.current .contacts__msg { color: #fff } .contacts__item .online-status--offline { display: none } .contacts__item .brick--lg { margin: 5px 0; width: 50px; height: 50px } .contacts__item .brick { transition: box-shadow .15s linear } .contacts__item:hover .brick > .brick { box-shadow: 0 0 0 2px #f7f7f7 } .contacts__item.current .brick > .brick { display: none } .contacts__item--banner .brick, .contacts__item--banner.current .brick > .brick { display: inline-block; box-shadow: 0 0 0 2px #fff } .contacts__item--banner.current .brick > .brick { overflow: hidden } .contacts__txt { margin: 0 0 0 14px; max-width: 160px } .contacts__txt--long { margin-right: -10px; max-width: 185px } .contacts__sticker { margin: 5px 0; max-width: 50px; max-height: 50px } .contacts__name { overflow: hidden; max-width: 140px; white-space: nowrap; text-overflow: ellipsis } .contacts__name:empty { display: none } .contacts__txt--long .contacts__name { max-width: 192px; text-overflow: clip } .contacts__item--banner .contacts__name { white-space: normal } .contacts__msg { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .contacts__msg--tall { max-height: 37px; white-space: normal; word-wrap: break-word } @supports (-webkit-line-clamp:2) { .contacts__msg--tall { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } } .contacts__favorite { position: absolute; z-index: 2; top: 21px; right: 16px } .contacts__favorite-off:hover, .contacts__favorite.active .contacts__favorite-on { fill: #fec309 } .contacts__favorite-on, .contacts__favorite.active .contacts__favorite-off { display: none } .contacts__favorite.active .contacts__favorite-on { display: inline-block } .contacts__hint { position: relative; padding: 15px 40px } .section-chat-left .tabs__item { overflow: visible; max-width: 45%; height: 82px; padding: 0 4px; font: 700 .857em/1.334 Helvetica, Arial, sans-serif } .section-chat-left .tabs__item > span { max-width: 100%; word-wrap: break-word } .section-chat-left .tabs__item:nth-child(4) { width: 48px } .contacts__hint, .contacts__user-badge, .contacts__info-typing, .writing .contacts__msg { display: none } .empty .contacts__hint--no-found, .not-found .contacts__hint--no-found, .wrong-request .contacts__hint--enter, .newmsg .contacts__user-badge--msg, .new-match-contact .contacts__user-badge--heart, .writing .contacts__user-badge--pencil, .writing .contacts__info-typing, .blocked-contacts .contacts__user-badge--report { display: block } .newmsg.new-match-contact .contacts__user-badge--msg { z-index: 2; -webkit-animation: heartbeat 2s infinite; animation: heartbeat 2s infinite } .contacts__loading { position: relative; display: none; margin-top: 10px; margin-bottom: 10px } .opacity00 .contacts__loading { display: block } .opacity00 .contacts__hint--more { display: none } @-webkit-keyframes move-right-icon { 0% { z-index: 2; -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } 16.6% { z-index: 2; -webkit-transform: rotateY(90deg); transform: rotateY(90deg) } 49.8% { z-index: 2 } 66.4% { z-index: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg) } 66.5% { z-index: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } } @keyframes move-right-icon { 0% { z-index: 2; -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } 16.6% { z-index: 2; -webkit-transform: rotateY(90deg); transform: rotateY(90deg) } 49.8% { z-index: 2 } 66.4% { z-index: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg) } 66.5% { z-index: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } } @-webkit-keyframes move-left-icon { 0% { z-index: 3; -webkit-transform: rotateY(90deg); transform: rotateY(90deg) } 16.6% { z-index: 3; -webkit-transform: rotateY(0deg); transform: rotateY(0deg) } 16.7% { z-index: 2 } 48.8% { z-index: 2 } 48.9% { z-index: 1 } 100% { z-index: 1 } } @keyframes move-left-icon { 0% { z-index: 3; -webkit-transform: rotateY(90deg); transform: rotateY(90deg) } 16.6% { z-index: 3; -webkit-transform: rotateY(0deg); transform: rotateY(0deg) } 16.7% { z-index: 2 } 48.8% { z-index: 2 } 48.9% { z-index: 1 } 100% { z-index: 1 } } .bundle-icon { position: absolute; top: 0; left: 0; width: 22px; height: 22px } .bundle-icon__item { position: absolute; z-index: 1; top: 0; left: 0; overflow: hidden; width: 11px; height: 22px; -webkit-transform-origin: 11px 0; transform-origin: 11px 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .bundle-icon__item:nth-child(2n) { -webkit-transform: rotateY(180deg); transform: rotateY(180deg) } .bundle-icon__item > .icon { position: absolute; top: 0; left: 0; width: 22px; height: 22px } .bundle-icon__item:nth-child(even) > .icon { -webkit-transform: scaleX(-1); transform: scaleX(-1) } .bundle-icon__item:nth-child(6) { -webkit-animation: move-right-icon 2.4s 2 0s linear; animation: move-right-icon 2.4s 2 0s linear } .bundle-icon__item:nth-child(3) { -webkit-animation: move-left-icon 2.4s 2 .4s linear; animation: move-left-icon 2.4s 2 .4s linear } .bundle-icon__item:nth-child(4) { -webkit-animation: move-right-icon 2.4s 2 .8s linear; animation: move-right-icon 2.4s 2 .8s linear } .bundle-icon__item:nth-child(1) { -webkit-animation: move-left-icon 2.4s 2 1.2s linear; animation: move-left-icon 2.4s 2 1.2s linear } .bundle-icon__item:nth-child(2) { -webkit-animation: move-right-icon 2.4s 2 1.6s linear; animation: move-right-icon 2.4s 2 1.6s linear } .bundle-icon__item:nth-child(5) { -webkit-animation: move-left-icon 2.4s 2 2s linear; animation: move-left-icon 2.4s 2 2s linear } .messenger { position: relative; vertical-align: top; display: inline-block; margin: 20px; border-radius: 15px; width: 860px; height: calc(100% - 40px); min-height: 520px } .messenger_ { position: absolute; border-radius: 15px; width: 100%; height: 100%; background: #fff } .messenger-close { position: absolute; z-index: 1; top: -14px; right: -14px; border: 3px solid #666; border-radius: 14px; width: 28px; height: 28px; background: #fff } .messenger-close > .icon { position: absolute; top: 3px; left: 3px } .section-chat-left .section-header--small { border-radius: 15px 0 0 0; padding: 13px 30px } .section-chat-left.el-loading .active .search-field .search-field__loupe, .section-chat-left.el-loading .active .search-field .search-field__reset { opacity: 0; visibility: hidden } .section-chat-left.el-loading .search-field .loader { display: none } .section-chat-left.el-loading .active .search-field .loader { display: inline-block } .st_promo_video .section-chat-cnt { bottom: 0 } #im_wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100% } .section-messages, #messages, #messages_read_status { height: 100% } .section-messages { position: relative; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #fff } .section-messages.transition { transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear } .section-messages_ { width: 580px } .conditions { position: absolute; top: 0; bottom: 0; left: 0; width: 580px; text-align: center } .conditions__cnt { display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; width: 100%; min-height: 100%; -webkit-animation: show .5s forwards; animation: show .5s forwards; -webkit-animation-play-state: paused; animation-play-state: paused } .ie11 .conditions__cnt { height: 100% } .conditions__cnt.animation-play { -webkit-animation-play-state: running; animation-play-state: running } .conditions__cnt.animation-disabled { opacity: 1; -webkit-animation: none; animation: none } .conditions__cnt_ { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; height: 100% } .st_promo_video .conditions__cnt { opacity: 1; -webkit-animation: none; animation: none } .conditions .video { margin: 0 auto; width: 470px } .conditions__captcha { margin: 30px 90px 20px } .interlocutor { width: 100%; height: 42px } .interlocutor__menu { float: right } .interlocutor-user { position: relative; display: inline-block; margin: 0 3px 1px 0; max-width: 100%; white-space: nowrap; transition: color .15s } .interlocutor-user:hover { color: #2b65f8 } .interlocutor-user--deleted { max-width: 55%; text-decoration: line-through } .interlocutor-user--deleted:hover { color: #bfbfbf } .interlocutor-user__name { overflow: hidden; max-width: 250px; white-space: nowrap; text-overflow: ellipsis } .interlocutor__user-icons .icon { position: relative; margin: 0 5px 0 0 } .section-chat-cnt .scroll, .section-chat-cnt .scroll_, .st_error .section-messages .scroll__ { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .section-chat-cnt .scrollbar-track { opacity: 0; visibility: hidden; transition: visibility .1s linear, opacity .1s linear } .section-chat-cnt:hover .scroll-visible .scrollbar-track, .section-chat-cnt .scroll-visible.active .scrollbar-track { opacity: 1; visibility: visible } .section-chat-footer .textarea { position: relative } .section-chat-footer .textarea .scroll-visible .message-tools__textarea { padding: 0 15px 0 0 } .section-chat-footer .textarea .scrollbar-track { right: 0 } .type_row_1 .textarea { height: 32px } .type_row_1 .textarea .scroll__ { overflow: hidden; line-height: 0 } .type_row_5 .textarea .scroll_ { height: 100px } #first, .st_first_disable #messages_body, .st_first_disable .message__hint-wrap, .st_first_disable .section-header, .st_error #messages_body, .st_error .message__hint-wrap, .st_error .section-header, .st_error .section-chat-footer, .st_promo #messages_body, .st_promo .message__hint-wrap, .st_promo .section-header, .st_promo_video .section-header, .st_promo .section-chat-footer, .st_promo .connection-banner, .st_msgs_disable .message-tools, .st_msgs_disable .message-attach, .st_promo_video #messages_body, .st_promo_video .message__hint-wrap, .st_promo_video .section-chat-footer, .st_promo_video .interlocutor__menu, .message-disabled { display: none } .st_error #first, .st_first_disable #first, .st_msgs_disable .message-disabled, .st_promo_video #first, .st_promo #first { display: block } .st_promo .section-chat-cnt .scroll__, .st_first_disable .section-chat-cnt .scroll__, .st_promo_video .section-chat-cnt .scroll__ { position: static } .messenger-banner-wrap { position: relative; z-index: 1; display: none; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 120px; padding: 0 25px; background: #fff; transition: -webkit-transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear } .st_normal .messenger-banner-wrap, .st_msgs_disable .messenger-banner-wrap { display: block } .st_no_banners .messenger-banner-wrap, .st_no_banners .messenger-blocker__banner { display: none } @media screen and (max-height:720px) { .stickers-show .messenger-banner-wrap, .upload-photo-show .messenger-banner-wrap, .gifts-show .messenger-banner-wrap { -webkit-transform: translateY(-120px); transform: translateY(-120px) } .st_msgs_disable--with-gifts .messenger-banner-wrap { display: none } .stickers-show .messenger-banner-wrap + .section-messages, .upload-photo-show .messenger-banner-wrap + .section-messages, .gifts-show .messenger-banner-wrap + .section-messages { margin: -120px 0 0 } .st_msgs_disable--with-gifts .messenger-banner-wrap + .section-messages { margin: 0 } } .st_no_banners .messenger-banner-wrap + .section-messages, .messenger-banner-wrap.hidden + .section-messages { margin: 0 } .message-disabled { position: relative; border-top: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 15px; min-height: 83px; padding: 20px 30px; background: #fff; color: #b0b6bf } .chat-gifts { position: absolute; width: 89% !important; bottom:0; height: 175px; overflow-x: scroll; overflow-y: hidden; padding: 0; background: #fff; color: #b0b6bf; } .st_msgs_disable--with-gifts .message-disabled { height: 220px } .interlocutor-loader > .blocker--light { border-radius: 0 0 15px 0 } @-webkit-keyframes message-show { 0% { top: -20px; opacity: 0 } 100% { top: 0; opacity: 1 } } @keyframes message-show { 0% { top: -20px; opacity: 0 } 100% { top: 0; opacity: 1 } } .messages { position: relative; padding: 5px 25px 0 20px } .messages__date { position: relative; display: block; margin: 6px 0 0 34px; padding: 10px 0; font-size: .786em; font-family: Helvetica, Arial, sans-serif; text-align: center } .messages__date + .message { padding: 8px 0 0 } .message { position: relative; padding: 31px 0 0 } .message--buttons { margin: 10px 0 0 } .message--animation { -webkit-animation: message-show .5s; animation: message-show .5s } .message > .brick--xsm { float: left; margin: 0; border-radius: 12px; width: 24px; height: 24px } .message__txt { position: relative; margin: -2px 0 0; padding: 0 55px 0 34px; white-space: normal; word-wrap: break-word; transition: color .15s } .message__txt p { margin: 0; line-height: 1.357; padding-right: 120px; } .message__name { font-size: .786em; font-family: Helvetica, Arial, sans-serif; } .message__time { position: absolute; top: 18px; right: 5px; font-size: .786em; font-family: Helvetica, Arial, sans-serif; transition: opacity .15s } .messages--with-loader { padding-top: 30px } .messages--with-loader .messages__loader { position: absolute; top: 0; right: 0; left: 34px; height: 30px } .message__pic { margin: 4px 0 } .message__pic_ { position: relative; z-index: 1; overflow: hidden; border-radius: 4px; width: 180px; height: 180px; border: 1px solid rgba(0, 0, 0, .1) } .message__pic_:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .message__pic_ > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 180px; max-height: 180px } .message__pic--full .message__pic_ { width: 100% } .message__pic--full .message__pic_ > img { max-width: none } .message__pic_ .message__pic-report { position: absolute; z-index: 2; right: 10px; bottom: 5px; display: none } .message__pic_:hover .message__pic-report { display: block } .message-pic__action { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background: rgba(51, 51, 51, .8); text-align: center; color: #fff } .message-pic__action-title { display: block; margin-top: 10px; padding: 0 5px } .message__pic_.message__pic--delete .message__pic-report { display: none } .message__pic_.message__pic--delete .message-pic__action--delete { display: block } .message__alert { position: relative; margin-top: 11px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 4px; width: 180px; height: 180px; background: url() no-repeat 0 0; background-clip: content-box } .message__alert-ico { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 90px; height: 90px; background: url() no-repeat 0 0 } .message__alert-btn { margin: 11px 0 0 20px; width: 205px } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .message__alert-ico { background-image: url(); background-size: 90px 90px } } .message-gift { margin: 5px 0 5px -5px; min-height: 70px } .message-gift > .gift { float: left; margin: 0 } .message-gift__tag { position: relative; display: inline-block; margin: 9px 0 0 23px; box-shadow: 0 2px 2px rgba(52, 57, 68, .06); border: 1px solid rgba(0, 0, 0, .15); border-left: 0; border-radius: 0 4px 4px 0; width: 170px; height: 52px; padding: 16px 10px 14px } .message-gift__tag::before { content: ''; position: absolute; top: -1px; left: -13px; width: 14px; height: 54px; background: #fff url() } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .message-gift__tag::before { background-image: url(); background-size: 14px 54px } } .message-gift__txt { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .message-gift__note { margin: 5px 0 0 93px } .message-gift__txt > p { margin: 5px 0 } .message-gift__txt > p:empty { display: none } .message-gift__txt > p:not(:empty) + .btn { margin-top: 10px } .message-map .message-map__link-get, .message-map.active .message-map__link-check { display: none } .message-map.active .message-map__link-get { display: inline } .message--several { padding-top: 10px } .message--several > .brick, .message--several .message__name { display: none } .message--several + .message { padding-top: 20px } .message--several + .message--several { padding-top: 10px } .message--several .message__time { top: 2px } .message__hint-wrap { position: relative; overflow: hidden; margin: 6px 0 10px 53px; height: 21px } .message__hint { position: absolute; opacity: 0; transition: opacity .2s } .read .message__hint--read, .unread .message__hint--unread, .report .message__hint--report, .section-messages .writing .message__hint-wrap .message__hint.message__hint--writing { opacity: 1 } .section-messages .writing .message__hint-wrap .message__hint { opacity: 0 } .message--error p { color: #b0b6bf } .message__moderated-photo { margin-top: 8px } .message__moderated-photo .icon { float: left; margin: 1px 9px 0 0 } .message__moderated-photo p { overflow: hidden } .error .message__txt, .pending .message__txt { color: #bfbfbf } .pending .message__txt .sticker, .pending .message__txt .message__pic, .error .message__txt .sticker, .error .message__txt .message__pic { opacity: .5 } .error .message__error { display: block } .error .message__time { opacity: 0 } .pending .message__pic_ .message__pic-report, .error .message__pic_ .message__pic-report, .pending .message__pic_ .b-link, .error .message__pic_ .b-link { display: none } .message__error { position: absolute; top: 0; right: 0; bottom: -10px; display: none; margin: auto 0; width: 16px; height: 16px; transition: opacity .15s } .message__error > .icon:hover { fill: #fff; background: #f02139 } .message-tools { position: relative; z-index: 1; min-height: 84px; padding:0; background: #fff } .message-tools .scroll_ { max-height: 90px } .message-tools__textarea { position: relative; overflow: hidden; width: 100%; min-height: 18px; padding-right: 4px; font: 1em/1.3333 'FS Albert Pro Web', Helvetica, Arial, sans-serif; white-space: pre-wrap; word-wrap: break-word; -webkit-font-smoothing: antialiased } .message-tools__textarea:empty:before { content: attr(data-placeholder); position: absolute; top: 0; left: 0; display: block; margin-right: -4px; cursor: text; font: 1em/1.3333 'FS Albert Pro Web', Helvetica, Arial, sans-serif; color: #bfbfbf; -webkit-font-smoothing: antialiased } .message-tools__textarea:empty:after { content: '' } .message-tools__icons { padding: 0 0 0 5px } .message-tools__wrap { overflow: hidden; padding: 0 20px 0 15px } .message-tools__field { overflow: hidden } .message-tools-icon { position: relative; margin: 0 0 0 10px; cursor: pointer } .message-tools-icon.active { color: #2b65f8 } .message-tools-icon use + use { opacity: 0 } .message-tools-icon.active use:first-child { opacity: 0 } .message-tools-icon.active use + use { opacity: 1 } .message-tools-icon__mark { position: absolute; top: -2px; right: -2px; border: 2px solid #fff; border-radius: 100%; width: 10px; height: 10px; background: #f02139; pointer-events: none } .message-tools__btn { padding: 0 0 0 10px } .message-tools__btn .icon { margin-right: -3px } .message-attach { position: absolute; z-index: 1; bottom: 84px; overflow: hidden; border-top: 1px solid rgba(0, 0, 0, .15); width: 100%; background: #fff; -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear } .message-attach--loading { padding: 20px 0 } .loading.message-attach--loading, .stickers-show .message-attach--stickers, .photos-show .message-attach--photo, .gifts-show .message-attach--gifts { -webkit-transform: translateY(0); transform: translateY(0) } .stickers-show.message-attach-animation-end .message-attach--stickers, .photos-show.message-attach-animation-end .message-attach--photo, .gifts-show.message-attach-animation-end .message-attach--gifts { position: relative; bottom: 0 } .message-attach--gifts .tabs__item { height: 51px; padding-top: 14px } .message-attach--gifts .gifts__content { max-height: 198px } .message-attach--gifts .gifts--by-price .gifts__content { max-height: 250px } .message-attach--gifts .gifts-roll { margin: 0; padding: 5px 0 15px 15px } .message-attach--gifts .gifts-roll > .gift { margin: 8px 3px -2px 13px; width: 74px; height: 74px } .message-attach--gifts .gifts__title { margin: 0; padding: 10px 32px 0 15px } .message-attach--photo .photo-list__photo-bar { background: #2d3238 } .sticker { vertical-align: top; margin: 10px 0 0 } .attention-gifts { margin: -20px; border-radius: 0 0 15px 0; height: 220px; text-align: center; color: #4d4d4d; } .attention-gifts > p { margin: -10px auto 20px; width: 480px } .attention-gifts > p:only-child { margin: 0 auto } .attention-gifts .gift { margin: 5px; border: 0; border-radius: 0; width: 74px; height: 74px; background: transparent; cursor: pointer } .attention-gifts .gift--hover:before { border-radius: 6px } @-webkit-keyframes slideDown { 0% { top: -20px; display: none; opacity: 0 } 1% { display: block; opacity: 0 } 100% { top: 0; display: block; opacity: 1 } } @keyframes slideDown { 0% { top: -20px; display: none; opacity: 0 } 1% { display: block; opacity: 0 } 100% { top: 0; display: block; opacity: 1 } } .connection-banner { position: relative; top: -20px; margin: 20px 0 15px 53px } .connection-banner--top-chat { top: 0 } .connection-banner.animated { -webkit-animation: slideDown .2s cubic-bezier(0, 0, .58, 1); animation: slideDown .2s cubic-bezier(0, 0, .58, 1) } .connection-banner .btn { margin-top: 10px } .emoji--1f339 { background-position: -2px -2px } .emoji--1f33a { background-position: -24px -2px } .emoji--1f352 { background-position: -46px -2px } .emoji--1f431 { background-position: -68px -2px } .emoji--1f440 { background-position: -90px -2px } .emoji--1f44a { background-position: -112px -2px } .emoji--1f44c { background-position: -134px -2px } .emoji--1f44d { background-position: -2px -24px } .emoji--1f44e { background-position: -24px -24px } .emoji--1f44f { background-position: -46px -24px } .emoji--1f451 { background-position: -68px -24px } .emoji--1f48b { background-position: -90px -24px } .emoji--1f494 { background-position: -112px -24px } .emoji--1f498 { background-position: -134px -24px } .emoji--1f4aa { background-position: -2px -46px } .emoji--1f525 { background-position: -24px -46px } .emoji--1f602 { background-position: -46px -46px } .emoji--e057, .emoji--1f604 { background-position: -68px -46px } .emoji--1f605 { background-position: -90px -46px } .emoji--1f606 { background-position: -112px -46px } .emoji--e04e, .emoji--1f607 { background-position: -134px -46px } .emoji--e405, .emoji--1f609 { background-position: -2px -68px } .emoji--e056, .emoji--1f60a { background-position: -24px -68px } .emoji--e409, .emoji--1f60b { background-position: -46px -68px } .emoji--1f60c { background-position: -68px -68px } .emoji--e402, .emoji--1f60d { background-position: -90px -68px } .emoji--1f60e { background-position: -112px -68px } .emoji--1f60f { background-position: -134px -68px } .emoji--1f610 { background-position: -2px -90px } .emoji--1f611 { background-position: -24px -90px } .emoji--1f612 { background-position: -46px -90px } .emoji--e058, .emoji--1f614 { background-position: -68px -90px } .emoji--1f616 { background-position: -90px -90px } .emoji--1f618 { background-position: -112px -90px } .emoji--1f61a { background-position: -134px -90px } .emoji--1f61c { background-position: -2px -112px } .emoji--e105, .emoji--1f61d { background-position: -24px -112px } .emoji--1f61e { background-position: -46px -112px } .emoji--1f61f { background-position: -68px -112px } .emoji--1f621 { background-position: -90px -112px } .emoji--1f622 { background-position: -112px -112px } .emoji--1f624 { background-position: -134px -112px } .emoji--1f625 { background-position: -2px -134px } .emoji--1f629 { background-position: -24px -134px } .emoji--1f62b { background-position: -46px -134px } .emoji--1f62c { background-position: -68px -134px } .emoji--e411, .emoji--1f62d { background-position: -90px -134px } .emoji--1f62f { background-position: -112px -134px } .emoji--1f631 { background-position: -134px -134px } .emoji--e410, .emoji--1f633 { background-position: -156px -2px } .emoji--1f634 { background-position: -156px -24px } .emoji--e40d, .emoji--1f635 { background-position: -156px -46px } .emoji--e40c, .emoji--1f637 { background-position: -156px -68px } .emoji--1f648 { background-position: -156px -90px } .emoji--1f649 { background-position: -156px -112px } .emoji--1f64a { background-position: -156px -134px } .emoji--e10b, .emoji--1f64f { background-position: -2px -156px } .emoji--2600 { background-position: -24px -156px } .emoji--2615 { background-position: -46px -156px } .emoji--263a { background-position: -68px -156px } .emoji--270b { background-position: -90px -156px } .emoji--270c { background-position: -112px -156px } .emoji--2764 { background-position: -134px -156px } .emoji--e11a, .emoji--1f608 { background-position: -156px -156px } .emoji-wrap { position: relative; display: inline-block; width: 36px; height: 36px; cursor: pointer } .emoji-wrap:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid transparent; border-radius: 3px; transition: border-color .2s } .emoji-wrap:hover:after, .emoji-wrap:active:after { border-color: #2761eb } .emoji-wrap--lg { width: 74px; height: 74px } .emoji-wrap--lg:after { border-radius: 6px } .emoji-wrap > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .emoji-tabs { position: relative; height: 250px; text-align: left } .emoji-tab-content { position: absolute; top: 51px; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; max-height: 198px; white-space: normal; transition: all .1s } .emoji-tabs__item.active .emoji-tab-content { opacity: 1; visibility: visible } .emoji-tab-content .emoji-wrap { margin: 1px 5px -5px } .emoji-tab-content .emoji-wrap--lg { margin: 8px 3px -2px 13px } .emoji-tabs > .emoji-tabs_ { border-bottom: 1px solid #dcdde0 } .emoji-tabs__panel { white-space: nowrap; transition: margin .5s } .emoji-tabs__arrow { position: absolute; z-index: 2; top: 0; width: 40px; height: 50px; padding: 9px 0 0 4px; background: #fff; transition: opacity .2s, left .2s, right .2s } .emoji-tabs__arrow--l { left: 0; border-right: 1px solid #dcdde0 } .emoji-tabs__arrow--r { right: 0; border-left: 1px solid #dcdde0 } .emoji-tabs__arrow--l.disabled { left: -40px; opacity: 0 } .emoji-tabs__arrow--r.disabled { right: -40px; opacity: 0 } .emoji-tabs__item { display: inline-block } .emoji-tabs__item.active .emoji-tab__item { border-color: #395fd1; color: #395fd1 } .emoji-tab__item { position: relative; vertical-align: top; display: inline-block; border-bottom: 3px solid transparent; width: 44px; height: 50px; padding: 0 6px; text-align: center; color: #bfbfbf } .emoji-tab__item > .icon { margin: 13px 0 1px } .emoji-tabs__item-img { margin: 12px 0 0; width: 26px; height: 26px } .emoji-tab__item-mark { position: absolute; top: 8px; left: 29px; border: 2px solid #fff; border-radius: 100%; width: 10px; height: 10px; background: #f02139 } .emoji-blocker { position: relative; z-index: 3; margin: 0 17px 0 0; padding: 25px 30px 15px } .emoji-tab-content .blocker--light { right: 17px; display: block } .emoji-blocker__title { font-size: 1.143em } .emoji-blocker__txt { margin: 3px 0 0; font-size: .786em; color: #999 } .emoji-blocker > .btn { margin: 0 20px 0 0 } .emoji-stickers { position: relative; min-height: 198px; padding: 5px 0 15px 15px } .emoji-stickers > .emoji-wrap { display: none } .emoji-tabs__item.active .emoji-stickers > .emoji-wrap { display: inline-block } .emoji-smiles { padding: 4px 0 0 14px } .emoji-loader { position: absolute; z-index: 100; top: 40px; right: 0; bottom: 0; left: 0; display: none; background: rgba(255, 255, 255, .8) } .el-loading > .emoji-loader { display: block } .emoji-wrap .emoji--1f339 { background-position: 0 0 } .emoji-wrap .emoji--1f33a { background-position: -24px 0 } .emoji-wrap .emoji--1f352 { background-position: -48px 0 } .emoji-wrap .emoji--1f431 { background-position: -72px 0 } .emoji-wrap .emoji--1f440 { background-position: -96px 0 } .emoji-wrap .emoji--1f44a { background-position: -120px 0 } .emoji-wrap .emoji--1f44c { background-position: -144px 0 } .emoji-wrap .emoji--1f44d { background-position: 0 -24px } .emoji-wrap .emoji--1f44e { background-position: -24px -24px } .emoji-wrap .emoji--1f44f { background-position: -48px -24px } .emoji-wrap .emoji--1f451 { background-position: -72px -24px } .emoji-wrap .emoji--1f48b { background-position: -96px -24px } .emoji-wrap .emoji--1f494 { background-position: -120px -24px } .emoji-wrap .emoji--1f498 { background-position: -144px -24px } .emoji-wrap .emoji--1f4aa { background-position: 0 -48px } .emoji-wrap .emoji--1f525 { background-position: -24px -48px } .emoji-wrap .emoji--1f602 { background-position: -48px -48px } .emoji-wrap .emoji--1f604 { background-position: -72px -48px } .emoji-wrap .emoji--1f605 { background-position: -96px -48px } .emoji-wrap .emoji--1f606 { background-position: -120px -48px } .emoji-wrap .emoji--1f607 { background-position: -144px -48px } .emoji-wrap .emoji--1f609 { background-position: 0 -72px } .emoji-wrap .emoji--1f60a { background-position: -24px -72px } .emoji-wrap .emoji--1f60b { background-position: -48px -72px } .emoji-wrap .emoji--1f60c { background-position: -72px -72px } .emoji-wrap .emoji--1f60d { background-position: -96px -72px } .emoji-wrap .emoji--1f60e { background-position: -120px -72px } .emoji-wrap .emoji--1f60f { background-position: -144px -72px } .emoji-wrap .emoji--1f610 { background-position: 0 -96px } .emoji-wrap .emoji--1f611 { background-position: -24px -96px } .emoji-wrap .emoji--1f612 { background-position: -48px -96px } .emoji-wrap .emoji--1f614 { background-position: -72px -96px } .emoji-wrap .emoji--1f616 { background-position: -96px -96px } .emoji-wrap .emoji--1f618 { background-position: -120px -96px } .emoji-wrap .emoji--1f61a { background-position: -144px -96px } .emoji-wrap .emoji--1f61c { background-position: 0 -120px } .emoji-wrap .emoji--1f61d { background-position: -24px -120px } .emoji-wrap .emoji--1f61e { background-position: -48px -120px } .emoji-wrap .emoji--1f61f { background-position: -72px -120px } .emoji-wrap .emoji--1f621 { background-position: -96px -120px } .emoji-wrap .emoji--1f622 { background-position: -120px -120px } .emoji-wrap .emoji--1f624 { background-position: -144px -120px } .emoji-wrap .emoji--1f625 { background-position: 0 -144px } .emoji-wrap .emoji--1f629 { background-position: -24px -144px } .emoji-wrap .emoji--1f62b { background-position: -48px -144px } .emoji-wrap .emoji--1f62c { background-position: -72px -144px } .emoji-wrap .emoji--1f62d { background-position: -96px -144px } .emoji-wrap .emoji--1f62f { background-position: -120px -144px } .emoji-wrap .emoji--1f631 { background-position: -144px -144px } .emoji-wrap .emoji--1f633 { background-position: -168px 0 } .emoji-wrap .emoji--1f634 { background-position: -168px -24px } .emoji-wrap .emoji--1f635 { background-position: -168px -48px } .emoji-wrap .emoji--1f637 { background-position: -168px -72px } .emoji-wrap .emoji--1f648 { background-position: -168px -96px } .emoji-wrap .emoji--1f649 { background-position: -168px -120px } .emoji-wrap .emoji--1f64a { background-position: -168px -144px } .emoji-wrap .emoji--1f64f { background-position: 0 -168px } .emoji-wrap .emoji--2600 { background-position: -24px -168px } .emoji-wrap .emoji--2615 { background-position: -48px -168px } .emoji-wrap .emoji--263a { background-position: -72px -168px } .emoji-wrap .emoji--270b { background-position: -96px -168px } .emoji-wrap .emoji--270c { background-position: -120px -168px } .emoji-wrap .emoji--2764 { background-position: -144px -168px } .emoji-wrap .emoji--1f608 { background-position: -168px -168px } .messenger-banner { position: relative; z-index: 1; vertical-align: middle; display: inline-block; border-radius: 10px; width: 100%; padding: 0 15px; background: #f7f7f7 } .messenger-banner_ { min-height: 90px } .ie11 .messenger-banner_ { height: 90px } .messenger-banner__ico { width: 60px; text-align: center } .messenger-banner__ico > img, .messenger-banner__ico > .icon { display: block; margin: auto } .messenger-banner__content { padding: 5px 10px 5px 15px } .messenger-banner__close { position: absolute; top: 8px; right: 6px; height: 16px; cursor: pointer } .bubble-wrap { padding: 25px 0 0 } .bubble-wrap .bubble::before { content: ''; position: absolute; top: -11px; left: 50%; margin: 0 0 0 25px; width: 28px; height: 25px; background: #ededed; -webkit-transform: skew(0, 40deg); transform: skew(0, 40deg) } .bubble { position: relative; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 35px; min-width: 180px; padding: 23px 20px; background: #ededed } .bubble .gift { margin: -15px 0 } .bubble .gift--framed { margin: -15px 5px } .bubble .sticker { margin: -15px 0 } .bubble-txt { vertical-align: middle; display: inline-block; overflow: hidden; max-width: 340px; max-height: 68px; font-size: 1.428em; line-height: 1.2; word-wrap: break-word } @supports (-webkit-line-clamp:3) { .bubble-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } } .gift + .bubble-txt { margin: 0 10px; max-width: 270px; text-align: left } .bubble-txt .emoji { margin: 4px 1px -4px } @media screen and (max-height:780px) { .bubble-txt { max-height: 63px; font-size: 1.286em } .bubble-txt .emoji { margin-top: 2px } .bubble .sticker { width: auto; height: 70px } } @-webkit-keyframes first-contact-scale { 0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes first-contact-scale { 0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } .messenger-blocker { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; height: calc(100% + 40px) } .messenger-blocker__profile { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; margin: 0 auto; width: 480px; padding: 30px 0 } .messenger-blocker__actions { position: absolute; z-index: 1; top: 25px; right: 30px } .messenger-blocker__hint { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; color: #bfbfbf } .messenger-blocker-hint:empty { display: none } .messenger-blocker__profile_.transition { transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear } .messenger-blocker__banner { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 25px 30px; text-align: left; transition: opacity .2s } .loading-show:not(.message-attach-animation-end) .messenger-blocker__banner, .stickers-show:not(.message-attach-animation-end) .messenger-blocker__banner, .photos-show:not(.message-attach-animation-end) .messenger-blocker__banner, .gifts-show:not(.message-attach-animation-end) .messenger-blocker__banner { opacity: 0 } .messenger-blocker__footer { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .message-match-title { margin: 0 auto 50px; width: 440px } .message-match { position: relative; margin: 20px auto 35px; width: 300px; height: 300px } .message-match__photo-box { position: absolute; top: -100px; right: -100px; bottom: -100px; left: -100px; overflow: hidden; margin: auto; border-radius: 100%; width: 300px; height: 300px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) } .message-match__photo-box::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 0 0 1px rgba(52, 58, 69, .15) inset; border-radius: 100% } .message-match__photo { position: absolute; top: -100px; right: -100px; bottom: -100px; left: -100px; margin: auto; min-width: 300px; min-height: 300px } .message-match__badges { height: 100% } .message-match-badge { position: absolute; top: -10px; right: -44px; display: -webkit-flex; display: -ms-flexbox; display: flex; opacity: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border: 5px solid #fff; border-radius: 100%; width: 130px; height: 130px; padding: 0 20px; background-clip: padding-box } .message-match-badge.animation-play { -webkit-animation: first-contact-scale .2s cubic-bezier(.175, .885, .32, 1.275) .2s forwards; animation: first-contact-scale .2s cubic-bezier(.175, .885, .32, 1.275) .2s forwards } .message-match-badge.animation-disabled { opacity: 1; -webkit-animation: none; animation: none } .message-match-badge--blue { background-color: #1774f1 } .message-match-badge--pink { background-color: #f55280 } .message-match-badge--yellow { background-color: #f4b600 } .message-match-badge--sky { background-color: #14c1ec } .message-match-badge:nth-child(2) { top: auto; right: auto; bottom: -15px; left: -40px; -webkit-animation-delay: .4s; animation-delay: .4s } .message-match-badge:nth-child(3) { top: -30px; bottom: auto; left: -45px; -webkit-animation-delay: .6s; animation-delay: .6s } .message-match-badge:nth-child(4) { -webkit-animation-delay: .8s; animation-delay: .8s } .message-match-badge.message-match-badge--matched { top: auto; right: 26px; bottom: -5px; left: auto; width: 70px; height: 70px; padding: 0; background-color: #f02139 } .message-match-badge__txt { display: block; font-size: 1.143em; line-height: 1.125; color: #fff } .message-match-badge__num { position: relative; display: block; margin: 0 0 2px 0; min-width: 40px; font-size: 2.286em; line-height: 1; color: #fff } .message-match-badge__num-in { position: relative; display: inline-block; width: 100%; background: #f4b600 } .message-match-profession { overflow: hidden; margin: -10px auto 30px; width: 480px; font-size: 1.142em; white-space: nowrap; text-overflow: ellipsis } .message-match-profession:last-child { margin-bottom: 0 } .message-match-profession > .icon { margin: 0 3px -3px 0 } .chat-confirmation > .bubble-wrap { margin: 0 0 20px } .chat-confirmation__skip { margin: 15px 0 0 } .message-match-txt { margin-right: auto; margin-left: auto; width: 380px } .message-match-txt:last-child { margin-bottom: 0 } .messenger-promo-footer { position: relative; border-radius: 0 0 15px 0; min-height: 220px; padding: 40px 50px 20px; background: #f7f7f7 } .ie11 .messenger-promo-footer { width: 580px } .messenger-promo-footer__icon { position: absolute; top: -32px; left: 50%; display: inline-block; margin: 0 0 0 -32px } .messenger-promo-footer__title { margin-bottom: 10px; word-wrap: break-word } .messages-limit-btn { padding: 10px 0 15px } .add-photo-btns { margin: 0 -20px } .messenger-blocker .carousel { margin: 40px -50px 0; width: 580px } @media screen and (max-height:780px) { .message-match-title { margin-bottom: 30px; width: 450px } .message-match { margin-bottom: 20px; width: 210px; height: 210px } .message-match__photo-box { -webkit-transform: scale(.7); transform: scale(.7) } .message-match-badge { top: -10px; right: -44px; width: 100px; height: 100px } .message-match-badge:nth-child(2) { bottom: -10px; left: -30px } .message-match-badge:nth-child(3) { top: -20px; left: -40px } .message-match-badge.message-match-badge--matched { top: auto; right: -1px; bottom: -5px; left: auto; width: 64px; height: 64px } .message-match-badge__num { font-size: 1.857em } .message-match-badge__txt { font-size: .857em; line-height: 1 } .message-match-profession { margin-top: 0; margin-bottom: 20px } .message-match-profession + .chat-confirmation { margin-top: -10px } .chat-confirmation > .bubble-wrap { margin-bottom: 20px } .message-match-txt { margin-bottom: 15px; width: 100% } .ie11 .message-match-txt { max-width: 480px } .message-match + .message-match-txt { margin-top: 25px } .messenger-promo-footer { min-height: 180px; padding: 40px 30px 20px } .messenger-promo-footer__title { font-size: 1.286em; line-height: 1.2222 } .messenger-promo-footer__txt { margin-bottom: 10px; font-size: 1em; line-height: 1.357 } .messages-limit-btn { padding-top: 0 } .messenger-blocker .carousel { margin-top: 30px } } @media screen and (max-height:620px) { .message-match-title { margin-bottom: 25px } .message-match { margin-top: 0; width: 140px; height: 140px } .message-match__photo-box { -webkit-transform: scale(.466); transform: scale(.466) } .message-match-badge { top: 45px; right: -80px; border: 0; width: 50px; height: 50px; padding: 0 } .message-match-badge:nth-child(2) { top: 45px; left: -80px } .message-match-badge:nth-child(3) { top: 45px; left: -160px } .message-match-badge.message-match-badge--matched { top: auto; right: 0; bottom: -18px; left: 0; margin: auto; border: 2px solid #fff; width: 36px; height: 36px } .message-match-badge--matched > .icon { width: 20px; height: 20px } .message-match-badge__num { margin: 0; font-size: 1.571em } .message-match-badge__txt { position: absolute; top: 60px; left: 50%; margin: 0 0 0 -40px; width: 80px; font-size: 1em; line-height: 1; color: #4d4d4d } .message-match-profession { margin-bottom: 10px } .message-match-profession + .chat-confirmation { margin-top: 0 } .messenger-blocker .carousel { margin-top: 20px } } .boost { margin: 0 0 30px } .boost .brick-wrap + .brick-wrap { margin-left: 12px } .boost-promo .counter-wrap { margin: 0 0 20px } .im-promo-potd { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .potd-head { padding: 19px 30px; text-align: left } .im-promo-potd__photo { position: absolute; top: 0; right: 0; bottom: 50px; left: 0; margin: auto; width: 500px; height: 500px; padding: 0 } .im-promo-potd__photo_ { position: relative; overflow: hidden; margin: auto; border-radius: 5px; width: 500px; height: 500px; -webkit-transform-origin: 0 50%; transform-origin: 0 50% } .im-promo-potd__photo_::before { content: ''; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 50px; background: linear-gradient(to top, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 100%) } .im-promo-potd__photo-img { position: absolute; top: 0; left: 0; min-width: 500px } .im-promo-potd__name { position: absolute; z-index: 1; bottom: 15px; left: 20px; color: #fff } @media only screen and (max-height:770px) { .im-promo-potd__photo { width: 400px; height: 400px } .im-promo-potd__photo_ { top: -50px; border-radius: 6px; -webkit-transform: scale(.8); transform: scale(.8); -webkit-backface-visibility: hidden } .im-promo-potd__photo_::before { height: 62px } .im-promo-potd__name { bottom: 21px; left: 32px; -webkit-transform: scale(1.25); transform: scale(1.25) } } @media only screen and (max-height:670px) { .im-promo-potd__photo { width: 300px; height: 300px } .im-promo-potd__photo_ { top: -100px; border-radius: 8px; -webkit-transform: scale(.6); transform: scale(.6) } .im-promo-potd__photo_::before { height: 83px } .im-promo-potd__name { bottom: 33px; left: 52px; -webkit-transform: scale(1.666); transform: scale(1.666) } } .im-promo-potd__like { position: absolute; z-index: 1; right: 20px; bottom: 20px; overflow: hidden } .im-promo-potd__switcher { position: absolute; bottom: 0; border-top: 1px solid rgba(0, 0, 0, .15); width: 100%; padding: 17px 30px 10px; white-space: nowrap } .im-promo-potd__day { position: relative; display: inline-block; margin: 0 0 0 10px; width: 60px } .im-promo-potd__day:first-child { margin-left: 0 } .im-promo-potd__day .loader { z-index: 1 } .potd-howto { position: relative; display: none; overflow: hidden; border-radius: 0 0 15px 0; height: 100% } .potd-howto__close { position: absolute; top: 33px; right: 25px; cursor: pointer } .potd-howto__collage { margin: 0 -30px 20px } .potd-howto__collage img { width: 100%; height: auto } .potd-howto__hint { margin: 20px 0 0 } .potd-howto_ { width: 580px; padding: 30px; background: #fff; text-align: center } .potd-howto > .scroll { height: 100%; max-height: 100% } .im-promo-potd--howto .potd-howto { display: block; -webkit-animation: show .5s; animation: show .5s } .im-promo-potd--howto .potd-promo { display: none } .im-promo-potd__arrow-l, .im-promo-potd__arrow-r { position: absolute; top: 0; bottom: 0; width: 40px; cursor: pointer } .im-promo-potd__arrow-l { left: -40px } .im-promo-potd__arrow-r { right: -40px } .im-promo-potd__arrow-l-ico, .im-promo-potd__arrow-r-ico { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 17px; height: 47px; fill: #999; transition: fill .3s, -webkit-transform .3s; transition: transform .3s, fill .3s; transition: transform .3s, fill .3s, -webkit-transform .3s } .im-promo-potd__arrow-l:hover .im-promo-potd__arrow-l-ico, .im-promo-potd__arrow-r:hover .im-promo-potd__arrow-r-ico { fill: #2b65f8; -webkit-transform: scaleY(.7); transform: scaleY(.7) } .im-promo-potd__arrow-l.disabled .b-link, .im-promo-potd__arrow-r.disabled .b-link { cursor: default } .im-promo-potd__arrow-l.disabled .im-promo-potd__arrow-l-ico, .im-promo-potd__arrow-r.disabled .im-promo-potd__arrow-r-ico { fill: #bfbfbf; -webkit-transform: none; transform: none } .im-instagram-promo { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .im-instagram-promo > .scroll { height: 100%; max-height: 100% } .im-instagram-promo__head { padding: 19px 30px; text-align: left } .instagram-promo-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .instagram-promo-header__icon { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .instagram-promo-header__title { -webkit-flex: 0 1 300px; -ms-flex: 0 1 300px; flex: 0 1 300px; margin: 0 10px } .instagram-promo-header__arrow { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; margin: 0 50px 0 auto } .instagram-promo-header__btn { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 auto } .instagram-promo-header.is-active .instagram-promo-header__arrow, .instagram-promo-header__btn { display: none } .instagram-promo-header.is-active .instagram-promo-header__btn { display: block } .im-instagram-promo__photo { position: relative; margin: 0 auto 30px; width: 520px } .instagram-media, .instagram-media-registered { margin: 1px auto; box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5), 0 1px 10px 0 rgba(0, 0, 0, .15); border-radius: 3px; width: calc(100% - 2px); max-width: 658px } @media only screen and (max-height:680px) { .instagram-media, .instagram-media-registered { width: calc(100vh - 40px - 135px - 10px); min-width: 390px } } .instagram-media_ { padding: 8px } .instagram-media__txt { margin: 8px 0 0; padding: 0 4px; text-align: left } .instagram-media__link { font: 1em/1.214 Arial, sans-serif; color: #000; word-wrap: break-word } .instagram-media__footer { overflow: hidden; margin: 0; padding: 8px 0 7px; font: 1em/1.214 Arial, sans-serif; text-align: left; color: #c9c8cd; white-space: nowrap; text-overflow: ellipsis } .digest-item { position: relative; padding: 20px 30px 20px 70px } .digest-item + .digest-item { border-top: 1px solid rgba(0, 0, 0, .15) } .digest-item--btn { padding: 20px 0; text-align: center } .digest-item .brick, .digest-item .btn { margin: auto } .digest-item__userpic { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px } .digest-item__date { position: absolute; top: 20px; right: 30px; opacity: .5; font-size: .928em; color: #333844 } .digest-item__action-desc { opacity: .5; font-size: .928em } .digest-name { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #333844 } .digest-name__link { color: #333844 } .digest-name__link:hover { color: #2b65f8 } .digest-name__icons { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 0 0 5px } .digest-name__icons > .verify-icon { margin: 0 0 0 5px } .digest-action { position: relative; padding: 5px 0 0 } .digest-action__call-top, .digest-action__call-bottom { font-size: .928em; color: #5d6876 } .digest-action__wrap { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; margin: 0 0 -5px; padding: 5px 0 } .digest-action__wrap + .digest-action__call-bottom { margin: 10px 0 0 } .digest-action .link { border-color: transparent; color: #2b65f8 } .digest-action .link:hover { border-color: rgba(43, 101, 248, 0.3) } .digest-action__wrap .link:before { content: ''; position: absolute; z-index: 1; top: -500px; right: -500px; bottom: -500px; left: -500px } .digest-photo { position: relative; overflow: hidden; width: 200px; height: 200px } .digest-photo:not(:only-child) { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .digest-photo:nth-last-child(2):first-child, .digest-photo:nth-last-child(2):first-child ~ .digest-photo, .digest-photo:nth-last-child(3):first-child, .digest-photo:nth-last-child(3):first-child ~ .digest-photo { width: 159px; height: 159px } .digest-photo:nth-last-child(4):first-child, .digest-photo:nth-last-child(4):first-child ~ .digest-photo { width: 119px; height: 119px } .digest-photo + .digest-photo { margin: 0 0 0 2px } .digest-photo__img { position: absolute; left: 50%; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } @supports (object-fit:cover) { .digest-photo__img { width: 100%; object-fit: cover } } .digest-photo__video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100% } .digest-photo--played > .digest-photo__video { background: #000 } .digest-photo-blocker { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; padding: 20px; text-align: center } .digest-photo-blocker--private { background: rgba(71, 8, 185, 0.9) } .digest-photo-blocker--more { background: rgba(43, 101, 248, 0.9) } .digest-photo-blocker--import, .digest-photo-blocker--video { background: rgba(43, 101, 248, 0.9) } .digest-photo-blocker__icon > .brick { background: rgba(0, 0, 0, .5) } .digest-photo-blocker__icon > .brick > .icon { fill: #fff } .digest-photo-blocker--video .brick { background: #fff } .digest-photo-blocker--video .brick > .icon { fill: #2b65f8 } .digest-photo-blocker__text { font-size: .928em; color: #fff } .ie11 .digest-photo-blocker__text { max-width: 100% } .digest-photo-blocker__icon + .digest-photo-blocker__text { margin: 5px 0 0 } .digest-photo-blocker__text + .digest-photo-blocker__btn { margin: 10px 0 0 } .digest-photo-blocker .btn:before { content: ''; border: 1px solid #fff } .digest-photo-blocker:hover .btn:before { border-color: rgba(255, 255, 255, .6) } .digest-photo-blocker .btn:active:before { border-color: #fff } .digest-job__text { color: #5d6876 } .digest-table { position: relative; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; margin: 0 0 -5px; padding: 0 0 5px } .digest-table__img { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 10px 0 0 } .digest-table__cost { display: block; opacity: .5; font-size: .857em; color: #333844 } .digest-bumped__info { font-size: .928em; color: #5d6876 } .digest-bumped__map { margin: 5px 0 0; width: 310px } .photo-list { position: relative; width: 900px; height: 150px } .photo-list:before, .photo-list:after { content: ''; position: absolute; z-index: 2; left: 0; display: none; width: 100%; height: 1px; background: rgba(26, 36, 57, .15) } .photo-list:before { top: 0 } .photo-list:after { bottom: 0 } .profile-section__photo-list .photo-list:before, .profile-section__photo-list .photo-list:after { display: block } .photo-list__counter { position: absolute; right: 10px; bottom: 10px } .photo-list__arrow-l, .photo-list__arrow-r { position: absolute; top: 0; bottom: 0; display: none; margin: auto; height: 42px } .gallery_has_arrows .photo-list__arrow-l { left: 10px; display: block } .gallery_has_arrows .photo-list__arrow-r { right: 10px; display: block } .photo-list__action-bar { float: left; overflow: hidden; height: 150px; transition: width .25s } .photo-list--upload .photo-list__action-bar--application { width: 300px } .photo-list__photo-bar { position: relative; overflow: hidden; height: 150px; background: #2d3238 } .photo-list__no-photos { width: 100%; text-align: center; color: #7a818c } .photo-list__slide { position: relative; left: 0; display: inline-block; min-width: 100%; height: 100%; white-space: nowrap; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0) } .photo-list__slide.animated { transition: left .5s, margin .5s, -webkit-transform .5s; transition: transform .5s, left .5s, margin .5s; transition: transform .5s, left .5s, margin .5s, -webkit-transform .5s } .photo-list__item { position: relative; vertical-align: top; display: inline-block; width: 150px; height: 150px } .photo-list__action-bar .photo-list__item { display: none } .photo-list__action-bar .photo-list__item--add-photos, .photo-list--video .photo-list__item--add-videos { display: inline-block } .photo-list--video-progress .photo-list__item--add-videos { display: none } .photo-list--video-progress .photo-list__item--video-progress { display: inline-block } .photo-list__img_ { position: relative; display: block; opacity: .9; overflow: hidden; width: 150px; height: 150px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAGBAMAAAAmmzNnAAAAD1BMVEUAAAD///////////////+PQt5oAAAABHRSTlMA+J4KB1MKeAAAACJJREFUCNdjMBJUZmBAIlVcnIAsBCni4ghkwUl0Prp6dPMA3ScJ90t0OagAAAAASUVORK5CYII=') no-repeat center center; cursor: pointer } @media only screen and (-webkit-min-device-pixel-ratio:1.25) { .photo-list__img_ { outline: 1px solid transparent } } .photo-list__item:hover .photo-list__img_ { opacity: 1 } .photo-list__img { position: absolute; top: -500px; right: -500px; bottom: -500px; left: -500px; margin: auto } .photo-list__item--private .photo-list__img, .photo-list__item--not-moderated .photo-list__img { width: 160px; height: 160px; -webkit-filter: blur(5px); filter: blur(5px) } .photo-list__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center } .photo-list__video { margin: 45px; border-radius: 100%; width: 60px; height: 60px; padding: 14px; background: rgba(0, 0, 0, .5) } .photo-list__item:hover .photo-list__video { background: #000 } .photo-list__action { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background: rgba(51, 51, 51, .8); text-align: center; color: #fff; white-space: normal } .photo-list__action--blue { background: rgba(37, 108, 245, .8) } .photo-list__action .icon { vertical-align: top } .photo-list__photo-bar .photo-list__action .icon, .photo-list__photo-bar .photo-list__action-title { opacity: .7 } .photo-list__photo-bar .photo-list__action--add-photos .icon { opacity: .3 } .photo-list__item:hover .photo-list__action .icon, .photo-list__item:hover .photo-list__action-title { opacity: 1 } .photo-list__action-bar .photo-list__action, .photo-list__item--delete .photo-list__action--delete, .photo-list__item--send .photo-list__action--send, .photo-list__action--facebook, .photo-list__action--instagram, .photo-list__action--private, .photo-list__action--not-moderated, .photo-list__action--add-photos { display: block } .photo-list__action--private { z-index: 3; background: rgba(112, 55, 192, .7) } .photo-list__action-bar .photo-list__action--add-photos { background: #1f72f2 } .photo-list__action-bar .photo-list__action--add-photos:hover { background: #1c68d9 } .photo-list__action-bar .photo-list__action--add-videos, .photo-list__action-bar .photo-list__action--video-progress { background: #3674a9 } .photo-list__action-bar .photo-list__action--add-videos:hover { background: #2e618f } .photo-list__photo-bar .photo-list__action--add-photos { background: transparent } .photo-list__photo-bar .photo-list__action--add-photos:hover { background: #bfbfbf } .photo-list--video-progress .photo-list__action--video-progress .loader { position: relative; margin: 17px auto 9px } .photo-list__action_ { max-width: 100% } .photo-list__action-title { display: block; padding: 10px 5px 0 } .photo-list__action.photo-list__action--blue .icon, .photo-list__action--blue .photo-list__action-title { opacity: 1 } .photo-list__nav { position: absolute; z-index: 2; top: 5px; right: 10px; left: 0; cursor: pointer; text-align: left; white-space: normal } .photo-list__nav-action { float: right; visibility: hidden; text-align: right } .photo-list__img_:hover + .photo-list__nav > .photo-list__nav-action, .photo-list__link:hover + .photo-list__nav > .photo-list__nav-action, .photo-list__nav:hover > .photo-list__nav-action, .photo-list__nav-action .btn.hovered { visibility: visible } .photo-list__nav-action .datalist .option { font-size: .889em; line-height: 1.25 } .photo-list__default-photo { display: inline-block } .photo-list__default-photo + .btn { margin-left: 7px } .photo-list__default-photo:not(.active) .btn.active, .photo-list__default-photo.active .btn:not(.active) { display: none } .photo-list__photo-coaching { position: absolute; z-index: 1; right: 10px; bottom: 10px; left: 10px } .photo-list__photo-coaching .photo-coaching { position: absolute; right: 0; bottom: 0; left: 0; margin: auto } .photo-list__photo-coaching .photo-coaching__star { position: relative } .photo-list__item--send .photo-list__nav, .photo-list__item--delete .photo-list__nav, .photo-list__item--delete .photo-list__photo-coaching { display: none } .photo-list__img_:hover + .photo-list__nav + .photo-list__photo-coaching .photo-coaching__star, .photo-coaching--sm:hover .photo-coaching__star { background-position: 0 -39px } .photo-list__photo-coaching .icon { position: relative } .photo-list__photo-coaching .photo-coaching:after, .photo-list__photo-coaching .icon:after { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .photo-list__photo-coaching .icon:after { box-shadow: 0 2px 8px 3px rgba(0, 0, 0, .1); width: 4px; height: 4px } .photo-list__photo-coaching .photo-coaching:after { box-shadow: 0 0 8px 3px rgba(0, 0, 0, .1); width: 100%; height: 0 } .photo-list__private-photo { position: absolute; z-index: 1; bottom: 4px; left: 9px } .photo-list--grid { height: auto; min-height: 600px } .photo-list--grid .photo-list__action-bar { position: absolute; z-index: 1; top: 0; left: 0; width: 150px } .photo-list--grid.photo-list--video .photo-list__action-bar { width: 300px } .photo-list--grid .photo-list__photo-bar { height: auto } .photo-list--grid .photo-list__slide { display: block; white-space: normal; -webkit-transform: none !important; transform: none !important } .photo-list--grid .photo-list__photo-bar .photo-list__item:first-child { margin: 0 0 0 150px } .photo-list--grid.photo-list--video .photo-list__photo-bar .photo-list__item:first-child { margin: 0 0 0 300px } .message-attach .photo-list__photo-bar { width: 430px } .gift { position: relative; display: inline-block; margin: 5px 0; width: 70px; height: 70px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .gift:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid transparent; border-radius: 100%; transition: border .1s } .gift--framed:before { box-shadow: 0 1px rgba(0, 0, 0, .03); border-radius: 0 } .gift--border:before { border-color: rgba(0, 0, 0, .1); background: #fff } .gift--hover:not(.gift--border):before { border-width: 2px } .gift--hover:hover:before, .gift--hover.active:before { border-width: 2px; border-color: #2b65f8 } .gift > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: opacity .2s, -webkit-filter .2s; transition: filter .2s, opacity .2s; transition: filter .2s, opacity .2s, -webkit-filter .2s } .gift--invisible > img { opacity: .3 } .gift--framed > img { width: 54px; height: 54px } .gift__private { position: absolute; right: 10px; bottom: 15px; padding: 2px 2px 1px; background: #000; font: 700 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #fff } .gift > .brick--xsm { position: absolute; right: -2px; bottom: -7px } .gift > .brick:before { box-shadow: 0 0 0 2px #f7f7f7 } .gift > .btn { position: absolute; z-index: 2; right: 0; bottom: -5px; opacity: 0; visibility: hidden; transition: all .2s } .gift--photo > .btn { right: -10px; bottom: -15px } .gift-add { position: relative } .gift-add__txt { margin: 0 0 0 17px; width: 145px; transition: color .2s } .gift-add:hover .gift-add__txt { color: #2b65f8 } .gift-add .gift > img { opacity: .8 } .gift-add:hover .gift > img { opacity: 1 } .gifts-list { margin: 5px -10px 0 0 } .gifts-list > .gift { margin-right: 10px } .gifts-list > .gift > .btn.active, .gifts-list > .gift:hover > .btn, .gifts-list > .gift.active > .btn { opacity: 1; visibility: visible } .gifts { text-align: left } .gifts__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin: 5px 22px 0 0 } .ie10 .gifts__title > b { display: block } .gifts .tabs__item { margin: 0 0 -1px } .ovl .gifts__content > .scroll { height: 250px; max-height: 250px } .ovl .gifts--by-price .gifts__content > .scroll { height: 300px; max-height: 300px } .gifts__btn { position: relative; display: inline-block; padding: 0 5px } .gifts-roll { margin: -5px -26px 5px 0 } .gifts-roll > .gift { vertical-align: top; display: none; margin: 8px 19px 9px -2px; width: 74px; height: 74px } .gifts-roll > .gift--hover:not(.gift--framed):before { border-radius: 6px } .gifts--all .gift, .gifts--popular .gift.popular, .gifts--romantic .gift.romantic, .gifts--friendship .gift.friendship, .gifts--framed .gift.framed { display: inline-block } .gifts-msg { opacity: 0; overflow: hidden; margin: 0; height: 0; text-align: left; transition: height .3s ease-in-out, margin .3s ease-in-out, opacity .4s ease-in-out } .gifts-msg--visible { opacity: 1; margin: 10px 0 0 0; height: auto } .gifts-msg__counter { float: right; margin: -3px 5px 0 0 } .gifts-msg > .textarea { height: 65px } .single-gift-carousel { position: relative; margin: 30px auto } .single-gift-carousel__arrow { position: absolute; top: 50%; margin: -21px 0 0 } .single-gift-carousel__arrow--left { left: 0 } .single-gift-carousel__arrow--right { right: 0 } .single-gift-carousel__items { position: relative; overflow: hidden; margin: 0 auto; width: 240px; height: 200px; white-space: nowrap } .single-gift-carousel__scroll.active { position: relative; white-space: nowrap; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out } .single-gift-carousel__item { display: inline-block; width: 240px } .verification-methods__item { position: relative } .verification-methods__item:not(:last-child) { margin: 0 0 20px } .verification-methods__item:hover .verification-methods__title { color: #4d4d4d } .verification-methods__item:hover .verification-methods__message--action { border-color: #2b65f8; color: #2b65f8 } .verification-methods__item:hover .verification-methods__icon--arrow { color: #2b65f8 } .verification-methods__item.is-blocked { pointer-events: none } .verification-methods__item--photo-verify + .verification-methods__item { margin-top: 30px } .verification-methods__item--photo-verify::after { content: '+'; position: absolute; bottom: -26px; left: 0; width: 32px; font-size: 24px; line-height: 1.167; text-align: center; color: #999; pointer-events: none } .verification-methods__item--linked .verification-methods__title { color: #4d4d4d } .verification-methods__item-inner { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .verification-methods__logo { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } .verification-methods__logo > .icon { vertical-align: top } .verification-methods__logo--google + .verification-methods__txt .verification-methods__title { direction: ltr; unicode-bidi: embed } .verification-methods__txt { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 10px; max-width: 155px; line-height: 1.143 } .verification-methods__title { font-size: 1em; color: #999 } .verification-methods__message { vertical-align: top; display: inline-block; overflow: hidden; margin: 1px 0 0; max-width: 100%; color: #bfbfbf; white-space: nowrap; text-overflow: ellipsis } .verification-methods__message--action { border-bottom: 1px solid rgba(77, 77, 77, 0.3); cursor: pointer; color: #4d4d4d; transition: color .2s, border-color .2s } .verification-methods__icon { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .verification-methods__icon--arrow { color: #bfbfbf } .verification-methods--line { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex } .verification-methods--line .verification-methods__item { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; width: 100px; padding: 0 5px } .verification-methods--line .verification-methods__item--plus { margin: 0; width: 30px; height: 60px; line-height: 60px } .verification-methods--line .verification-methods__item--photo-verify { margin-right: 10px; margin-bottom: 0 } .verification-methods--line .verification-methods__item--photo-verify::after { top: 0; right: -15px; left: auto; width: 20px; height: 64px; line-height: 64px } .verification-methods--line .verification-methods__item-inner { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .verification-methods--line .verification-methods__txt { display: block; margin: 10px 0 0 } .verification-methods--box { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .verification-methods--box .verification-methods__item { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 15px; width: 100px; padding: 0 5px } .verification-methods--box .verification-methods__item--plus { margin: 0; width: 30px; height: 60px; line-height: 60px } .verification-methods--box .verification-methods__item--photo-verify::after { top: 0; right: -10px; left: auto; width: 20px; height: 64px; line-height: 64px } .verification-methods--box .verification-methods__item-inner { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .verification-methods--box .verification-methods__txt { display: block; margin: 10px 0 3px 0 } .verification-methods--digest .verification-methods__item:not(:last-child) { margin-bottom: 10px } .upload-site { position: relative; vertical-align: top; display: inline-block; margin: 0 32px 0 0; max-width: 64px } .upload-site:last-child { margin: 0 } .upload-site__txt { margin: 0 -10px } .upload-site:hover .upload-site__txt { color: #2b65f8 } .icon--google + .upload-site__txt { direction: ltr; unicode-bidi: embed } .profile-photo-import { width: 900px; height: 180px; padding: 30px 20px; text-align: center } .profile-photo-import .upload-site__txt { font-size: .786em } .upload-area { margin: 25px 0 20px; border: 2px dashed rgba(0, 0, 0, .15); border-radius: 10px; padding: 20px 25px; background: #f7f7f7; background-clip: border-box; transition: background .1s linear, border-color .1s linear } .upload-area.hover { border-color: rgba(0, 0, 0, 0.167); background: rgb(242, 242, 242) } .upload-control.simple, .old-upload .upload-control.html5 { display: none } .old-upload .upload-control.simple { display: inherit } .classic-upload-btn { overflow: hidden } .classic-upload-btn input { position: absolute; top: 0; left: -300px; opacity: 0 } .select { position: relative; vertical-align: middle; display: inline-block; margin: 5px 0; width: 100%; min-width: 40px; height: 44px; font: 1.143em/1.25 'Montserrat', Helvetica, Arial, sans-serif; text-align: left; outline: none !important; } .select-label:hover, .select.focus .select-label { border-color: #2b65f8; color: #4d4d4d } .select-label:hover:after, .select.focus .select-label:after, .input-group:hover > .select .select-label:after, .input-group.focus > .select .select-label:after { background: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%209zM5%209h7l-3.5%204L5%209zm3.5-6L12%207H5l3.5-4z%22%20fill%3D%22%234d4d4d%22/%3E%3C/svg%3E) } .select.disabled:after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0 } .select--sm { height: 32px; font-size: 1em; line-height: 1.2857 } .select + .select { margin-left: 7px } .select .scroll_ { max-height: 320px } .select-label { position: relative; display: block; overflow: hidden; outline: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 22px; height: inherit; padding: 11px 30px 11px 20px; background: #fff; cursor: pointer; color: #4d4d4d; white-space: nowrap; text-overflow: ellipsis; transition: border-color .2s, color .2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .select-label:empty:before { content: ''; display: inline-block } .select--sm .select-label { border-radius: 16px; padding: 6px 30px 6px 15px } .select-label:after { content: ''; position: absolute; top: 50%; right: 10px; margin-top: -8px; width: 16px; height: 16px; background: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%209zM5%209h7l-3.5%204L5%209zm3.5-6L12%207H5l3.5-4z%22%20fill%3D%22%23bfbfbf%22/%3E%3C/svg%3E) } .select--sm .select-label:after { right: 7px } .select-label > .icon { position: absolute; top: 50%; right: 10px; margin: -8px 0 0; fill: #bfbfbf } .select-label:hover > .icon { fill: #4d4d4d } .select--sm .select-label > .icon { right: 7px } .select.value .select-label { color: #4d4d4d } .select .select-label.placeholder { color: #bfbfbf } .select.disabled .select-label { background: #f7f7f7; cursor: default } .select.disabled .select-label { color: #bfbfbf } .select > .icon { position: absolute; z-index: 1; top: 50%; right: 8px; margin: -8px 0 0; background: #fff } .value .select__reset { display: block } .select__reset, .focus .select__reset, .active .select__reset { display: none; cursor: pointer } .select-options { position: absolute; z-index: 10; top: 100%; left: 0; opacity: 0; visibility: hidden; display: none; margin: 13px 0 0 0; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .15); border-radius: 14px; min-width: 100%; max-width: 500px; max-height: 350px; padding: 10px 0; background: #fff; -webkit-transform: translateY(10px); transform: translateY(10px); transition: all .15s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .select-options.tc { top: auto; bottom: 100%; margin: 0 0 13px 0 } .select-options:after { content: ''; position: absolute; z-index: -1; top: -5px; left: 20px; border: 1px solid; border-color: rgba(0, 0, 0, .15) transparent transparent rgba(0, 0, 0, .15); width: 6px; height: 6px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .select-options.tc:after { top: auto; bottom: -5px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg) } .select.active .select-options { opacity: 1; visibility: visible; display: block; -webkit-transform: translateY(0); transform: translateY(0); overflow-y: scroll; } .error .select-label { border-color: #f66 } .select--day { width: 31% } .select--month { width: 36% } .select--year { width: 31% } .select--day + .select--month, .select--month + .select--year { margin-left: 1% } .select--year > .select-label { text-overflow: clip } .select-group { white-space: nowrap } .select-group .select + .select { margin-left: 0 } .select-group .select-label { border-radius: 0 } .select-group .select:first-child .select-label { border-radius: 22px 0 0 22px } .select-group .select:last-child .select-label { border-radius: 0 22px 22px 0 } .select-group .select--sm:first-child .select-label { border-radius: 16px 0 0 16px } .select-group .select--sm:last-child .select-label { border-radius: 0 16px 16px 0 } .select-hint { margin-bottom: -10px; border-top: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 14px 14px; padding: 9px 20px 10px; background: #f7f7f7; text-align: left; white-space: normal } @media screen and (max-height:690px) { .select .scroll_ { max-height: 200px } } .scroll_{ outline: none; overflow-y: scroll !important; } .scroll__{ outline: none; } .input, .textarea { vertical-align: middle; display: inline-block; margin: 5px 0; outline: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 24px; width: 100%; height: 44px; padding: 11px 20px; background: #fff; font: 1.143em/1.25 'Montserrat', Helvetica, Arial, sans-serif; color: #4d4d4d; -webkit-font-smoothing: antialiased; transition: border-color .2s } .input::-ms-clear, .input::-ms-reveal { display: none } input::-webkit-contacts-auto-fill-button { display: none !important; visibility: hidden; margin: 0; width: 0; height: 0; pointer-events: none } .textarea { overflow-y: auto; border-radius: 16px; height: auto; padding: 6px 15px; font-size: 1em; line-height: 1.2857; resize: none } .textarea_:empty:before { content: attr(data-placeholder); position: absolute; top: 0; left: 0; cursor: text; color: #bfbfbf } .textarea_ { min-height: 55px; word-wrap: break-word } .textarea .scroll_ { max-height: 90px } .textarea--sm .textarea_ { min-height: 20px } .textarea--sm .scroll_ { max-height: 55px } .textarea .scroll-visible .textarea_ { padding-right: 15px } .textarea .scrollbar-track { right: 0 } .textarea .scroll.scroll-visible:before, .textarea .scroll.scroll-visible:after { display: none } .input--sm { border-radius: 16px; height: 32px; padding: 6px 15px; font-size: 1em; line-height: 1.2857 } .input--lg { border-radius: 30px; height: 60px; padding: 6px 30px; font-size: 1.429em; line-height: 1.2 } .input:hover, .input:focus, .textarea:hover, .textarea:focus, .textarea.focus { border-color: #2b65f8 } .input:disabled, .textarea:disabled, .textarea.disabled, .input[disabled], .textarea[disabled] { border: 1px solid rgba(0, 0, 0, .15); background: #f7f7f7; color: #bfbfbf } .input[readonly] { border: 1px solid rgba(0, 0, 0, .15) } input::-webkit-input-placeholder { color: #bfbfbf } input:-moz-placeholder { color: #bfbfbf } input::-moz-placeholder { color: #bfbfbf } input:-ms-input-placeholder { color: #bfbfbf } .input::-ms-clear { display: none } .error .input, .error .textarea, .empty .input { border-color: #f66 } .input-error, .input-empty { display: none; margin: 0 20px 0; font-size: .929em; line-height: 1.23; text-align: left; color: #f02139 } .error .input-error, .empty .input-empty { display: block } .input--sm + .input-error, .input--sm + .icon + .input-error, .input--sm + .input-empty, .input--sm + .icon + .input-empty { margin: 0 16px } .input-hint { position: relative; margin: 0 20px; font-size: .929em; line-height: 1.23; text-align: left; color: #999 } .input-hint > .icon { margin: 0 0 -4px 0 } .input-hint:hover > a, .input-hint:hover > .p-link { color: #2b65f8 } .input-hint:hover > .p-link { border-color: #2b65f8 } .input-hint:hover > .input-hint__icon { fill: #2b65f8 } .input--sm ~ .input-hint, .input--sm ~ .input-error, .input--sm ~ .input-empty { margin-left: 16px } .error .input-error:not(:empty) + .input-hint { margin-top: 5px } .empty .input-empty:not(:empty) + .input-hint { display: none } .input-group { position: relative; display: table; margin: 5px 0; width: 100% } .input-group > .select { display: table-cell; margin: 0; width: 88px } .input-group > .select--sm { width: 72px } .input-group > .select .select-label { border-radius: 22px 0 0 22px } .input-group .select-options {} .input-group .select-options:after { left: 50%; margin: 0 0 0 -3px } .input-group .options {} .input-group > .input { display: table-cell; margin: 0; border-left: 0; border-radius: 0 22px 22px 0 } .input-group:hover > .select .select-label, .input-group.focus > .select .select-label, .input-group:hover > .input, .input-group.focus > .input { border-color: #2b65f8 } .input-group.error > .input, .error > .input-group > .input, .input-group.error > .select .select-label, .error > .input-group > .select .select-label { border-color: #f66 } .input-group:hover > .select .select-label, .input-group.focus > .select .select-label, .input-group.error > .select .select-label { border-right: 1px solid rgba(0, 0, 0, .2) } .icon { display: inline-block; width: 16px; height: 16px; fill: currentColor; transition: color .2s, fill .2s, background .2s, box-shadow .2s, opacity .2s } .icon-svg { display: block; box-sizing: border-box; width: inherit; max-width: inherit; height: inherit; max-height: inherit; fill: inherit; background: inherit; -moz-transform: translateX(0); pointer-events: none } .icon--lg .icon-svg { -ms-transform: translate(.5px, -.3px) } .icon-svg > use { transition: opacity .2s } .icon--xsm { width: 22px; height: 22px } .icon--lg { width: 32px; height: 32px } .icon--xlg { width: 44px; height: 44px } .icon--xxlg { width: 64px; height: 64px } .icon--spread { width: 100%; height: 100% } .icon--white { fill: #fff } .icon--red { border-color: #f02139; fill: #f02139 } .icon--like { border-color: #f02139; fill: #f02139 } .icon--attention { border-color: #ff8200; fill: #ff8200 } .icon--blue { border-color: #2b65f8; fill: #2b65f8 } .icon--delivery { border-color: #2b65f8; fill: #2b65f8 } .icon--favourite { fill: #fec309 } .icon--black { fill: #000 } .icon--dgrey { fill: #4d4d4d } .icon--invisibility { border-color: #1eb2fc; fill: #1eb2fc } .icon--verify { border-color: #1eb2fc; fill: #1eb2fc } .icon--green { fill: #1ac636 } .icon--fcbk, .icon--grey.icon--fcbk:hover, .has-hover:hover .icon--fcbk { fill: #3464d4 } .icon--twttr, .icon--grey.icon--twttr:hover, .has-hover:hover .icon--twttr { fill: #1cacff } .icon--google, .icon--grey.icon--google:hover, .has-hover:hover .icon--google { fill: #dd4b39 } .icon--instgrm, .icon--grey.icon--instgrm:hover, .has-hover:hover .icon--instgrm { fill: #c13984 } .icon--lnkdn, .icon--grey.icon--lnkdn:hover, .has-hover:hover .icon--lnkdn { fill: #006799 } .icon--vk, .icon--grey.icon--vk:hover, .has-hover:hover .icon--vk { fill: #2c70b4 } .icon--odnoklassniki, .icon--grey.icon--odnoklassniki:hover, .has-hover:hover .icon--odnoklassniki { fill: #f7882b } .icon--yandex, .icon--grey.icon--yandex:hover, .has-hover:hover .icon--yandex { fill: #ee3a2e } .icon--phone, .icon--grey.icon--phone:hover, .has-hover:hover .icon--phone { fill: #1ac636 } .icon--card, .icon--grey.icon--card:hover, .has-hover:hover .icon--card { fill: #fec309 } .icon--photo-verify, .icon--grey.icon--photo-verify:hover, .has-hover:hover .icon--photo-verify { fill: #1eb2fc } .icon--spp, .icon--grey.icon--spp:hover, .has-hover:hover .icon--spp { border-color: #fec309; fill: #fec309; background: radial-gradient(circle closest-side, #c40710 0%, #c40710 90%, transparent 90%); color: #ffe54f } .icon--grey.icon--spp { background: transparent; color: #bfbfbf } .icon--mailru, .icon--grey.icon--mailru:hover, .has-hover:hover .icon--mailru { fill: #1e8cdf } .icon--msn, .icon--grey.icon--msn:hover, .has-hover:hover .icon--msn { fill: #4d5cea } .icon--badoo { fill: #f1792c; background: radial-gradient(circle closest-side, #fff 0%, #fff 90%, transparent 90%) } .icon--blendr { fill: #02dbf7; background: radial-gradient(circle closest-side, #fff 0%, #fff 90%, transparent 90%) } .icon--hotornot { fill: #e60f32; background: radial-gradient(circle closest-side, #fff 0%, #fff 90%, transparent 90%) } .icon--vip { border-color: #67a7e3 } .icon--riseup { border-color: #29cf29; fill: #29cf29 } .icon--encounters { border-color: #00caa8; fill: #00caa8 } .icon--customize { fill: #7258db } .icon--grey, .icon.disabled:hover { border-color: #bfbfbf; fill: #bfbfbf } .icon--grey:hover, .icon--grey.hovered { border-color: #4d4d4d; fill: #4d4d4d } .icon--hover:hover { border-color: #2b65f8; fill: #2b65f8 } .icon--circle, .icon--ring, .icon--circle > .icon-svg, .icon--ring > .icon-svg { border-radius: 100% } .icon--ring { border-width: 1px; border-style: solid } .icon--ring > .icon-svg { margin: -1px } .icon--ring.icon--spp, .icon--color.icon--spp { fill: rgba(196, 7, 16, 0.7); background: transparent; color: #fec309 } .icon--circle, .icon--circle.icon--grey:hover { fill: #fff } .icon--circle.icon--grey:not(:hover) { fill: #fff; background: #bfbfbf } .icon--circle.icon--invisibility { background: #1eb2fc } .icon--circle.icon--verify { background: #1eb2fc } .icon--circle.icon--blue { background: #2b65f8 } .icon--circle.icon--delivery { background: #2b65f8 } .icon--circle.icon--green { background: #1ac636 } .icon--circle.icon--red { background: #f02139 } .icon--circle.icon--spotlight { background: #2b8cfc } .icon--circle.icon--riseup { background: #29cf29 } .icon--circle.icon--encounters { background: #00caa8 } .icon--circle.icon--red { background: #f02139 } .icon--circle.icon--like { background: #f02139 } .icon--circle.icon--favourite { background: #fec309 } .icon--circle.icon--attention { background: #ff8200 } .icon--circle.icon--pink { background: #f55280 } .icon--circle.icon--boost { background: #f55280 } .icon--circle.icon--undo { background: #9aa9c5 } .icon--circle.icon--smile { fill: #000; background: #fec309 } .icon--circle.icon--grey.icon--smile:hover { fill: #000 } .icon--bubble.icon--grey:not(:hover) use:first-child { fill: #bfbfbf } .icon--bubble.icon--green use:first-child { fill: #1ac636 } .icon--bubble.icon--pink use:first-child { fill: #f55280 } .icon--bubble.icon--newbie use:first-child { fill: #86c313 } .icon--bubble.icon--delivery use:first-child { fill: #2b65f8 } .icon--bubble use + use { fill: #fff } .icon--invert:hover { fill: #fff } .icon--invert:hover > .icon-svg { overflow: hidden; border: 2px solid #2b65f8; border-radius: 100%; background: #2b65f8 } .icon--group use + use { opacity: 0 } .icon--group:hover use:first-child { opacity: 0 } .icon--group:hover use + use { opacity: 1 } .icon--inline { vertical-align: middle; margin: -3px 0 0 } .icon--bubble-stroke > .icon-svg { max-width: 100%; max-height: 100% } .icon--apple { fill: #333 } .icon--windows { fill: #058aeb } .icon--apple:hover, .icon--windows:hover { fill: #2b65f8 } .ico-popularity { display: inline-block; width: 24px; height: 12px; background: url(../images/icons-popularity@2x.6.png) 0 0 no-repeat !important; } .ico-popularity--lg { width: 60px; height: 60px } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .ico-popularity { background-image: url(../images/icons-popularity@2x.6.png) !important; background-size: 320px 96px } } .ico-popularity--vlow, .sidebar-nav__popularity--vlow .ico-popularity { background-position: -4px -9px } .ico-popularity--low, .sidebar-nav__popularity--low .ico-popularity { background-position: -36px -9px } .ico-popularity--average, .sidebar-nav__popularity--average .ico-popularity { background-position: -68px -9px } .ico-popularity--high, .sidebar-nav__popularity--high .ico-popularity { background-position: -100px -9px } .ico-popularity--vhigh, .sidebar-nav__popularity--vhigh .ico-popularity { background-position: -132px -9px } .ico-popularity--lg.ico-popularity--vlow { background-position: -2px -34px } .ico-popularity--lg.ico-popularity--low { background-position: -66px -34px } .ico-popularity--lg.ico-popularity--average { background-position: -130px -34px } .ico-popularity--lg.ico-popularity--high { background-position: -194px -34px } .ico-popularity--lg.ico-popularity--vhigh { background-position: -258px -34px } .loader02 { top:20px; width: 26px; height: 26px; border: 4px solid rgba(0, 0, 0, 0.25); border-top-color: #333; border-radius: 50%; position: relative; animation: loader-rotate 1s linear infinite; margin: -28px auto 0 auto; } @keyframes loader-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .simple-page__content { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999; } .simple-promo{ position: relative; top: 0; left: 0; width: 60%; height: 100%; margin-left: 20%; margin-top: 5%; background: #fff; } .page-center { margin: 0 auto; width: 100%; max-width: 1240px; padding: 0 20px } .verify-icon { position: relative; display: inline-block } .verify-icon__text { font-size: .7171em; line-height: 1.1234em; color: #1eb2fc } .payment-promo { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; text-align: center } .payment-promo__head { position: relative; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 10px; padding: 10px 0 0; text-align: center } .payment-promo__content { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } .payment-promo__footer { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100% } .ie11 .payment-promo__head, .ie11 .payment-promo__content, .ie11 .payment-promo__footer { max-width: 100% } .payment-promo__head > .user-photo:before { display: none } .payment-promo__head > .popularity-graph { margin: 21px 0 0 } .payment-promo__head--credits { background: #f69426 } .payment-promo__head--spp { margin: 0 0 60px; height: 60px; background: #f69426 } .payment-promo__head--spp > .brick--lg { top: 15px } .payment-promo__head--spp > .brick--xlg { top: 9px; width: 76px; height: 76px } .payment-promo__head--spp > .icon { margin: 25px 0 0 } .payment-promo__buttons { margin: 10px 0 } .payment-promo__balance { display: table; height: 93px } .payment-promo__balance-title { position: absolute; top: 8px; right: 0; left: 0; margin: auto; color: #fff } .payment-promo__balance-point { position: relative; display: inline-block; margin-right: 7px; border-radius: 100%; width: 8px; height: 8px; background: #fff } .payment-promo__balance-point:after { content: ''; position: absolute; top: -3px; left: -3px; border: 1px solid #fff; border-radius: 100%; width: 12px; height: 12px } .payment-promo__balance-decor { vertical-align: bottom; display: table-cell; width: 50% } .payment-promo__balance-decor:before { content: ''; display: block; margin: 0 0 -1px; border-radius: 0 6px 0 0; height: 43px; background: #fff; -webkit-transform: translateY(0); transform: translateY(0) } .payment-promo__balance-decor--right:before { border-radius: 6px 0 0 0 } .payment-promo__credits { position: relative; display: inline-block; padding: 18px 8px 3px; font: 2.571em Helvetica, Arial, sans-serif } .payment-promo__credits:before, .payment-promo__credits:after { content: ''; position: absolute; bottom: 0; width: 6px; height: 6px } .payment-promo__credits:before { left: 0; background: radial-gradient(1px at 100% 0, rgba(0, 0, 0, 0) 6px, #fff 7px) } .payment-promo__credits:after { right: 0; background: radial-gradient(1px at 0 0, rgba(0, 0, 0, 0) 6px, #fff 7px) } .payment-promo__txt { font-size: 1.143em; line-height: 1.25 } .payment-info { margin: 45px 0 0 0 } .payment-info__item { position: relative; vertical-align: top; display: inline-block; margin: 0 30px; width: 210px; min-height: 145px } .payment-info__item:hover .link { border-color: #2b65f8; color: #2b65f8 } .payment-info__item .btn { position: static } .payment-info__ico--top { background-position: -173px 0 } .payment-info__ico--bottom { background-position: -346px 0 } .payment-info__ico--favorite { background-position: -519px 0 } .payment-info__ico--top .payment-info__photo, .payment-info__ico--bottom .payment-info__photo { height: 165px } .payment-info__ico--top .payment-info__photo { top: 39px } .payment-info__ico--top .payment-info__photo, .payment-info__ico--top .payment-info__photo:after { border-radius: 0 0 5px 5px } .payment-info__ico--bottom .payment-info__photo, .payment-info__ico--bottom .payment-info__photo:after { border-radius: 5px 5px 0 0 } .payment-info__ico > .icon { position: absolute; z-index: 1; right: 0; bottom: -10px; left: 0; margin: auto; box-shadow: 0 0 0 2px #fff; border-radius: 100% } .payment-info__photo { position: relative; top: 5px; display: inline-block; overflow: hidden; border-radius: 5px; width: 154px; height: 199px } .payment-info__photo:after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 0 0 1px rgba(52, 58, 69, .15) inset; border-radius: 5px } .payment-info__photo > img { position: absolute; z-index: 1; top: -100px; right: -100px; bottom: -100px; left: -100px; margin: auto } .payment-info__hint { display: block; margin: 15px 0 0 } .popularity-status--low { color: #f02139 } .popularity-status--average { color: #cf9200 } .popularity-status--high { color: #2bc43f } .payment-features { margin: 30px; text-align: center } .payment-feature { position: relative; vertical-align: top; display: inline-block; width: 19%; padding: 0 20px; text-align: center } .payment-feature__ico { margin: 0 0 15px } .payment-feature__ico > .icon { vertical-align: top } .payment-feature-column { vertical-align: top; display: inline-block; border-right: 1px solid rgba(0, 0, 0, .1); padding: 0 70px } .payment-feature-column:last-child { border: 0 } .payment-feature-column__cell { position: relative; padding: 52px 0 0 0; text-align: left } .payment-feature-column__cell:first-child { padding: 0 } .payment-feature-column__txt { vertical-align: middle; display: inline-block; width: 160px } .payment-feature-column__cell .icon { vertical-align: middle; margin: 0 15px 0 0 } .payment-promo-details { padding: 20px } .payment-promo-details:empty { display: none } .double-credits { position: relative; margin: 0 auto 30px; width: 704px; padding: 30px 165px; background: #fff3b9 url() 30px center no-repeat; color: #3f4752 } .double-credits:before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 6px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAGBAMAAAA4UgPUAAAAKlBMVEX/////87n46Z7/8rj98LH//vr9+uj666T78L7777n77av9+N/89dT788+GngZVAAAAM0lEQVQI12MoUmUAAiYlBkNpECNRkMFQEsRoBDJELjAw8DgCGYIrU8O6BEEMkSJ1R0FBAKYZB20bkjmPAAAAAElFTkSuQmCC') 0 0 } .spp-unsubscribe { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; overflow: hidden } .spp-unsubscribe .section-left-side, .spp-unsubscribe_ { border-top: 18px solid #f69426; padding-top: 15px } .spp-unsubscribe_ { padding-right: 40px; padding-left: 40px } .spp-unsubscribe .section-right-side { padding-top: 40px } .spp-unsubscribe__grey-box { margin: 0 0 20px; border: 1px solid #bfbfbf; padding: 20px; background: #f7f7f7; color: #999 } .spp-unsubscribe .payment-feature-column__cell { padding-top: 22px } .spp-unsubscribe__reason-list { padding: 0 20px 20px } .spp-unsubscribe__reason-item { padding: 5px 0 } .spp-unsubscribe__submit { width: 100%; text-indent: -1000px } .spp-unsubscribe__footer { margin: 20px 0 0 } .popularity-graph__flame { position: absolute; top: -22px; left: 6px; opacity: .6 } .popularity-graph__snow { position: absolute; top: 59px; left: 6px; opacity: .6 } .popularity-graph { position: relative; border-top: 1px dashed #fff; border-top: 1px dashed rgba(255, 255, 255, .3); border-bottom: 1px dashed #fff; border-bottom: 1px dashed rgba(255, 255, 255, .3); height: 55px } .popularity-graph:before { content: ''; position: absolute; top: 26px; right: 0; left: 0; border-top: 1px dashed #fff; border-top: 1px dashed rgba(255, 255, 255, .3) } .popularity-graph_ { position: relative; display: inline-block; height: 100% } .popularity-graph__line { position: absolute; z-index: 1; top: -4px; right: -5px; overflow: hidden; margin: auto; width: 435px; height: 60px } .popularity-graph__dots { display: inline-block; margin-left: -16px } .popularity-graph__dots + .popularity-graph__dots { margin-left: 70px } .popularity-graph__dots:last-child > .popularity-graph__dot { width: 15px; height: 15px; background: #fff } .popularity-graph__dots:last-child > .popularity-graph__dot:before { content: ''; position: absolute; top: -9px; left: -9px; border: 2px solid #fff; border-radius: 100%; width: 23px; height: 23px } .popularity-graph__dots:last-child > .popularity-graph__dot:hover { border-color: #fff } .popularity-graph__dots:last-child > .popularity-graph__dot:hover:before { border-color: #2b65f8 } .popularity-graph__dot { position: absolute; z-index: 2; border: 3px solid #fff; border-radius: 100%; width: 16px; height: 16px; background: #7dcdee; cursor: pointer; transition: border-color .2s } .popularity-graph__dot:hover { border-color: #2b65f8 } .popularity-graph__dot--0 { bottom: -8px } .popularity-graph__dot--1 { bottom: 3px } .popularity-graph__dot--2 { bottom: 14px } .popularity-graph__dot--3 { bottom: 25px } .popularity-graph__dot--4 { bottom: 36px } .popularity-graph__dot--5 { bottom: 46px } .popularity-graph__days { position: absolute; bottom: -53px; margin: 0 0 0 -27px; width: 70px } .popularity-graph__days:before { content: ''; position: absolute; top: -5px; right: 0; left: 0; margin: auto; border-radius: 100%; width: 8px; height: 8px; background: #fff } .popularity-graph__days-day { display: block; overflow: hidden; margin: 10px 0 0 0; white-space: nowrap; text-overflow: ellipsis } .popularity-graph__dots:last-child .popularity-graph__days-day { color: #4d4d4d } .popularity-line { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: -5px 50px 0; padding: 40px 20px 35px } .popularity-lines > .popularity-line:last-child { padding-bottom: 15px } .popularity-line + .popularity-line:before { content: ''; position: absolute; top: 10px; right: 20px; left: 20px; border-top: 1px solid #ebeced } .popularity-col { width: 335px } .popularity-col:first-child { z-index: 2; margin: 0 90px 0 0 } .popularity-col:nth-child(2) { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start } .popularity-line:nth-child(2n+1) .popularity-col:first-child { margin: 0 0 0 90px } .popularity-col--sm { padding: 0 35px } .popularity-line:nth-child(2n+1) { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } .popularity-line--bma.popularity-line--bma { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .popularity-line--bma.popularity-line--bma .popularity-col:first-child { margin: 0 90px 0 0 } .popularity-col .btn { min-width: 200px } .popularity-col__title { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 24px !important; margin:0 !important; padding:0 !important; } .popularity-col__img { position: relative; display: inline-block } .popularity-col__img--riseup { left: -15px; width: 332px; height: 216px } .popularity-col__img--riseup.popularity-col__img--female { background: url('../images/popularity-riseup-female.5.png') 0 0 no-repeat } .popularity-col__img--riseup.popularity-col__img--male { background: url('../images/popularity-riseup-male.5.png') 0 0 no-repeat } .popularity-col__img--riseup .popularity-col__user-photo { display: inline-block; overflow: hidden; margin: 1px 0 0 2px; border-radius: 6px 6px 0 0; width: 178px; height: 150px } .popularity-col__user-photo { position: relative } .popularity-col__user-photo > img { position: absolute; top: -100px; right: -100px; bottom: -100px; left: -100px; margin: auto } .popularity-col__img--meets { right: -15px; width: 330px; height: 250px; background: url('../images/popularity-meets.5.png') 0 0 no-repeat } .popularity-col__img--meets .popularity-col__user-photo { position: relative; top: 72px; left: 2px; overflow: hidden; width: 240px; height: 166px } .popularity-col__img--meets .popularity-col__user-photo_, .popularity-col__img--spotlight .popularity-col__user-photo_ { position: absolute; bottom: 0; left: -135px; overflow: hidden; border-radius: 100%; width: 510px; height: 166px; padding-top: 12px; text-align: center } .popularity-col__img--meets .popularity-col__user-photo_ img { position: absolute; top: -200px; right: 0; bottom: -212px; left: 0; margin: auto; width: 240px; height: auto; } .popularity-col__img--meets .popularity-col__others { position: absolute !important; } .popularity-col__img--meets .popularity-col__others--1 { top: 114px !important; left: 10px !important; } .popularity-col__img--meets .popularity-col__others--2 { bottom: -14px !important; left: 165px !important; } .popularity-col__img--meets .popularity-col__others--3 { top: 93px !important; right: 10px !important; } .popularity-col__img--spotlight { left: -15px; padding-top: 125px; } .popularity-col__shadow_circle { overflow: hidden; border-radius: 100%; width: 320px; height: 45px; background: #f5f6f9 } .popularity-col__img--spotlight .popularity-col__user-photo_ { bottom: 4px; left: -90px; background: none; } .popularity-col__img--spotlight .brick { position: absolute !important; } .popularity-col__img--spotlight .popularity-col__add, .popularity-col__img--spotlight .popularity-col__others--1 { bottom: 49px !important; } .popularity-col__img--spotlight .popularity-col__add, .popularity-col__img--spotlight .popularity-col__others--3 { left: 50% !important; margin-left: -110px !important; } .popularity-col__img--spotlight .popularity-col__others--3, .popularity-col__img--spotlight .popularity-col__others--4 { bottom: -20px !important; } .popularity-col__img--spotlight .popularity-col__owner, .popularity-col__img--spotlight .popularity-col__others--2 { bottom: 79px !important; left: 50% !important; margin-left: -30px !important; } .popularity-col__img--spotlight .popularity-col__others--2 { bottom: 0 !important; } .popularity-col__img--spotlight .popularity-col__others--1, .popularity-col__img--spotlight .popularity-col__others--4 { left: 50% !important; margin-left: 50px !important; } .popularity-col__img--spotlight .popularity-col__others { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .popularity-icon { position: relative; display: inline-block; margin: 16px 0 10px; width: 94px; height: 94px; } .popularity-icon--phone { background: url('../images/icon-mobile.5.png') 0 0 no-repeat } .popularity-icon--photo { position: relative; z-index: 1; background: url('../images/icon-photo.5.png') 0 0 no-repeat } .popularity-col__more-photo { position: absolute; top: 12px; right: -100px; left: -100px } .popularity-col__more-photo .popularity-col__others + .popularity-col__others { margin-left: 38px } .popularity-col__img--spp { overflow: hidden; border-radius: 100%; width: 230px; height: 230px; background: #f5f6f9 } .popularity-col__img--spp:before { content: ''; display: block; height: 50%; background: #fec309 } .popularity-col__img--spp .popularity-col__owner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 100px } .popularity-col__img--spp .popularity-col__others { position: absolute; margin: 0 } .popularity-col__img--spp .popularity-col__others--1 { top: 137px; left: 0 } .popularity-col__img--spp .popularity-col__others--2 { top: 183px; left: 84px } .popularity-col__img--spp .popularity-col__others--3 { top: 137px; right: 0 } .popularity-col__cost { margin: 0 -20px -30px } .show-me { -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); } .buttonChat { position: fixed; bottom: 20px; right: 20px; font-family: "Lato"; -webkit-appearance: none; font-size: 1rem; line-height: 1.2; border-radius: 3px; border: 2px solid #0f48d8; background: #1A50D9; color: white; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; text-decoration: none !important; cursor: pointer; text-align: center; font-weight: normal; padding: 10px 16px; padding-left: 30px; outline: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-box-shadow: 10px 10px 102px -12px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 102px -12px rgba(0,0,0,0.75); box-shadow: 10px 10px 102px -12px rgba(0,0,0,0.75); z-index: 9999999 !important; } .buttonChat:before { position: absolute; top: 0; left: 10px; bottom: 0; margin: auto; width: 10px; height: 10px; background: #53DD6C; content: ""; border-radius: 100px; z-index: 9999999 !important; } .buttonChat:hover { background: #0e41c2; } .buttonChat:active { bottom: 17px; background: #0e41c2 !important; } .buttonChat:visited { background: #0e41c2 !important; } .chattt { position: absolute; background: #fff; top: 0; right: -300px; height: 100%; overflow-y: scroll; width: 300px; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; z-index: 9999999 !important; -webkit-box-shadow: 10px 10px 102px -12px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 102px -12px rgba(0,0,0,0.75); box-shadow: 10px 10px 102px -12px rgba(0,0,0,0.75); } .chattt li{ padding: 0 !important; padding-left: 15px !important; } .chat__human { display: block; width: 100%; padding: 10px 20px; color: #444; -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; } .chat__human:hover { background: #0a34e9; color: #fff; } .chat__human > * { display: inline-block; vertical-align: middle; } .chat__avatar { width: 45px; background: #fff; border: solid 2px #2ACF2A; border-radius: 100px; margin-right: 20px; } .chat__users { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; font-weight: 100; color: #fff; margin: 0 !important; height: 60px; width: 100%; background: #0a34e9; } .chat__users h4{ font-size: 0.8rem; margin: 0 !important; } .profile-menu__fast-message { position: fixed; min-width: 260px; max-height: 200px; z-index: 99 !important; background: none; } .fast-message { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; position: relative; min-height: 170px; background: #fff; } .fast-message__inner { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; -webkit-flex: 1 1 auto; flex: 1 1 auto; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; background: #fff; } .fast-message__close { position: absolute; top: 9px; right: 9px; cursor: pointer; color: #c9c9c9; z-index: 2; } .fast-message__close > .icon { pointer-events: none; } .fast-message__close:hover { color: #949494; } .fast-message__state { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; flex: 1 0 auto; padding: 30px 20px; } .fast-message__state-icon { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-bottom: 10px; color: #7000e3; } .fast-message__state-title { text-align: center; color: #6a6a6a; } .ie11 .fast-message__state-title { max-width: 100%; } .fast-message__content { -webkit-flex: 1 0 auto; flex: 1 0 auto; } .fast-message__screen { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex-direction: column; flex-direction: column; padding: 30px 10px; color: #949494; } .fast-message__screen-icon { margin-bottom: 5px; } .fast-message__screen-text { font-size: 13px; margin-bottom: 0; text-align: center; } .ie11 .fast-message__screen-text { max-width: 100%; } .fast-message__field-wrapper { display: -webkit-flex; display: flex; height: 100%; -webkit-align-items: center; align-items: center; border-top: 1px solid rgba(0, 0, 0, .08); } .fast-message__action { position: relative; padding: 15px 0; text-align: center; color: #303030; } .fast-message__action::before { content: ''; position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background: rgba(0, 0, 0, .08); } .fast-message__field { -webkit-flex: 1 1 auto; flex: 1 1 auto; } .fast-message__field .text-field__input { font-size: 13px; border: 0; } .fast-message__send > .btn { margin: 0; height: 40px; font-weight: 300; font-size: 13px; color: #7000e3; } .fast-message__chat { height: 120px; padding-top: 20px; position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .fast-message__chat .scroll { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; flex: 1 0 auto; max-height: 100%; } .fast-message__chat-inner { padding: 0 20px; } .fast-message__message { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 10px; } .fast-message__message-text { border-radius: 18px; border-bottom-right-radius: 0; padding: 7px 15px; background: #7000e3; font-weight: 400; color: #fff; } .fast-message__message-time { margin-top: 5px; font-size: 10px; color: #c9c9c9; } .fast-message__loader { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .7); z-index: 2; } .fast-message--header { max-width: 260px; } .fast-message--header::before { content: ''; position: absolute; top: -7px; /* @noflip begin */ left: 50%; /* @noflip end */ border: 1px solid rgba(0, 0, 0, .08); border-right: 0; border-bottom: 0; width: 13px; height: 13px; background: #fff; /* @ltr begin */ -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); /* @ltr end */ z-index: 0; } .fast-message--header .fast-message__chat { padding-top: 30px; } .fast-message--header .fast-message__inner { box-shadow: 0 10px 20px rgba(0, 0, 0, .15); } .fast-message--header .fast-message__content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; position: relative; z-index: 1; } .fast-message--sidebar .fast-message__chat { padding-top: 20px; max-height: 100px; } .n-wrapper { position: fixed !important; right: 2em; top: 1em; z-index: 999999; display: none; cursor: pointer; } .n-box { position: relative; width: 18em; height: 64px; margin: .8em auto; padding: .5em 1.4em .5em .6em; border-radius: .3em; box-shadow: 0 0.4em 1em -0.2em rgba(0, 0, 0, 0.2); background: rgba(255,255,255,0.7); } .n-close { display: block; position: absolute; top: .4em; right: .4em; width: .9em; height: .9em; line-height: .8em; text-align: center; color: #777; border: 1px solid #777; border-radius: 50%; cursor: pointer; } .n-picture { height: 100%; width: 48px; display: block; border-radius: 50%; float: left; background-size: cover; background-repeat: no-repeat; background-position: top center; } .n-message { position: relative; top: 50%; transform: translateY(-50%); padding-left: 5px; font-family: 'montserrat'; font-size: 1em; font-weight: 500; display: block; width: 78%; float: right; color: #8C8C8C; vertical-align: middle; } .n-message a { text-decoration: none; text-transform: capitalize; color: #2ECBAA; font-weight: bold; } @media only screen and (max-width: 1280px) { .spotlight-users .user-in{ width: 52px; height: 52px; } .spotlight-users .current-in{ width: 52px; height: 52px; } .spotlight-users .current-in .photo{ width: 52px; height: 52px; } .wall .search{ width: 185px; height: 200px; } .wall .search .profile-photo{ height: 135px; } .search-btn-cancel{ right: 35%; } } @media only screen and (max-width: 1280px) { .header__container{ left: -70px; } } @media only screen and (min-width: 1280px) { } @media only screen and (min-width: 1440px) { } @media only screen and (min-width: 1620px) { } .lb { display: none; position: fixed !important; z-index: 9999 !important; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); text-align:center; } .lb img { max-width: 90%; max-height: 80%; margin-top: 2%; } .lb:target { outline: none; display: block; } .list { width: 100%; background: #fff; border-radius: 2px; list-style: none; padding: 0; margin-top: 10px; } .list-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding-bottom: 5px; padding-top: 5px; border-bottom: none; } .list-item:last-child { border-bottom: none; } .list-item-image { border-radius: 50%; width: 50px; top:5px; } .list-item-content { margin-left: 10px; } .list-item-content h4, .list-item-content p { margin: 0; } .list-item-content h4 { margin-top: -2px; font-size: 15px; } .list-item-content p { margin-top: -10px; font-size: 13px; color: #aaa; } .User-area { width: 38px; height: 38px; position: relative; cursor: pointer; margin-top: -5px; } .User-area > .User-avtar { width: 100%; height: 100%; border-radius: 30px; border: 2px solid #fff; box-shadow: 0px 0px 15px -5px #000; } .User-area > .User-avtar > img { width: 100%; height: 100%; border-radius: 30px; } .User-Dropdown { display: none; position: absolute; border-radius: 7px; background: #fff; box-shadow: 0px 0px 15px rgba(214, 214, 214, 0.78); list-style: none; padding: 0 20px; width: 235px; margin: 0; top: 70px; right: -9%; } .User-Dropdown:before { content: ""; position: absolute; width: 0; height: 0; margin-left: -0.5em; right: 0px; box-sizing: border-box; border: 7px solid black; border-color: transparent transparent #ffffff #ffffff; transform-origin: 0 0; transform: rotate(135deg); box-shadow: -3px 3px 8px -3px rgba(214, 214, 214, 0.78); } .User-Dropdown.U-open { display: block; } .User-Dropdown > li { position: relative; padding: 0px; line-height: 47px; min-width: 220px !important; } .User-Dropdown > li:last-child { border-bottom: 0px; } .User-Dropdown > li > a { font-size: 14px; font-family: 'Montserrat'; font-weight: 700; padding: 15px 25px 16px 10px; text-decoration: none; color: #333; transition: all .2s ease-out; } .User-Dropdown span { position: absolute; top: 12px; right: 30px; height: 25px; width: auto; background: none; padding: 3px 10px; color: #fff; font-family: 'Montserrat'; font-weight: 900; line-height: 18px; border-radius: 5px; font-size: 14px; } .User-Dropdown > li:before { content: ''; width: 0px; height: 40px; position: absolute; margin-top: 4px; border-radius: 0 1px 1px 0; left: 0px; transition: all .2s ease; } .User-Dropdown > li:hover:before { width: 5px; border-radius: 30px; } .User-Dropdown > li a:hover { margin-left: 5px; } .card-container { margin: 0 8px 25px; position: relative; display: inline-table; } .card-container.video--card { width: 180px; float: left; cursor: pointer; -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07); overflow: hidden; border-radius: 5px; } .card-container .card-container__img { float: left; width: 100%; position: relative; overflow: hidden; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 240px; background-color: #000; } .card-container .card-container__img video { width: auto; height: 320px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease; } .card-container .category { position: absolute; top: 38%; left: 0px; padding: 12px 16px; color: #fff; text-transform: uppercase; font-size: 15px; opacity: 1; z-index: 11; } .card-container .card-container__img .play-button { cursor: pointer; position: absolute; bottom: 10px; right: 12px; } .card-container .card-container__img .play-button .btn { width: 36px; height: 36px; overflow: hidden; border: 3px solid #ddd; border-radius: 50%; position: relative; } .card-container .card-container__img .play-button .btn::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 10px; border-color: transparent transparent transparent #ddd; position: absolute; left: 4px; right: 0; margin-left: auto; margin-right: auto; top: 6px; } .card-container .card-container__meta { float: left; width: 100%; padding: 5px 0; background: #fff; min-height: 20px; } .card-container .card-container__meta .meta__video-name { font-size: 14px; color: #454343; padding: 0px 10px; height: 25px !important; letter-spacing: 0; text-align: left; } .card-container .card-container__meta .text { font-size: 11px; color: #818181; } .card-container .card-container__meta .meta__likes-votes { float: left; width: 100%; padding: 5px 10px 10px; } .card-container .card-container__meta .meta__likes-votes .left-meta { width: 50%; float: left; } .card-container .card-container__meta .meta__likes-votes .right-meta { width: 50%; float: right; text-align: right; } .card-container .card-container__meta .meta__likes-votes .right-meta.meta--votes .text { float: none; text-align: right; } .card-container .card-container__meta .meta__likes-votes .right-meta.meta--votes .text--top, .card-container .card-container__meta .meta__likes-votes .right-meta.meta--votes .text--bottom { display: block; font-size: 12px; } .card-container .card-container__meta .meta__likes-votes .right-meta.meta--votes .text--bottom { font-size: 11px; } .card-container:hover .card-container__img .play-button .btn { border-color: #fff; } .card-container:hover .card-container__img .play-button .btn:after { border-color: transparent transparent transparent #fff; } /*Custom Class*/ .mt-17 { margin: 17px 0 0; } .cat--private { background-color: #4C0C6F; } #duration{width:640px;height:30px;background-color:black} #duration div{height:30px;width:0%;background-color:white} .big{ position: fixed; min-width: 100%; min-height: 100%; right: 0; bottom: 0; width: auto; height: auto; border-radius:10em; } .profile-videos { position:relative; top:0px; width: 100%; height:300px; overflow-y: hidden; overflow-x: auto; white-space: nowrap; margin:0; padding:0; } .blurview{ filter: blur(4px); -webkit-filter: blur(4px); } .blurviewbig{ filter: blur(18px); -webkit-filter: blur(18px); } .emojione{font-size:inherit;height:3ex;width:3.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle}img.emojione{width:auto} nav.video-control { position: absolute; left: 50%; top: 70%; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0.2; transition: all 0.5s ease; overflow: hidden; width:350px; z-index:1999; } nav.video-control:hover { opacity: 1; } nav.video-control button { background: #030303; color: #EDEDED; border: 0.2rem solid #030303; padding: 0.5rem 1rem; float: left; height: 3rem; display: inline-table !important; width: 20%; } nav.video-control button:hover { } nav.video-control button:active { } nav.video-control button.active { background: #f00000; } nav.video-control button i { font-size: 26px; } nav.video-control button:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } nav.video-control button:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } nav.video-control #end-call:hover { background: #FF3D3D; } nav.video-control #end-call:active { background: #f00000; } nav.video-control .on i { color: #FF3D3D !important; } nav.video-control:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } nav.video-control:last-child, nav.video-control input:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } #meet_section{ } .meetContent::-webkit-scrollbar-track { border-radius: 10px; background-color: #eeeef1; } .meetContent::-webkit-scrollbar { width: 11px; } .meetContent::-webkit-scrollbar-thumb { padding: 2px; border-radius: 10px; background-color: #c2c2ce; border: 2px solid #eeeef1; } .liked{ color: #ff4444 !important; } .liked-border{ border-color: #ff4444 !important; } .liked-border:before{ border-color: #ff4444 !important; } .liked-border:hover{ border-color: #ff4444 !important; } .left-radius { border-radius: 10px; } .right-radius { border-radius: 10px; } .premiumPlan { box-shadow: -4px 4px 14px rgba(0, 0, 0, .1); border-radius: 10px; position:relative; width:220px; height: 90px; display:inline-table; margin-left:55px; margin-top: 15px; } .creditPlan { box-shadow: -4px 4px 14px rgba(0, 0, 0, .1); border-radius: 10px; position:relative; width:220px; display:inline-table; margin-left:20px; } .selectPremiumPlan { position: relative; display: block; margin: 0 0; padding: 0px; transition: all 300ms; font-weight: 900; min-width: 220px; min-height: 90px !important; cursor: pointer; z-index: 99 !important; } .radio__interval { font-size: 1.1em; font-weight: bold; position: absolute; left: 25px; top: 50%; transform: translateY(-50%); z-index: 5; } .radio__price { font-size: 1.8em; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); } .radio__price__info { position: absolute; right: 25px; top: 70%; font-size: .7em; transform: translateY(-50%); padding-top: 15px; } .montserratBold{ font-family: 'Montserrat' !important; font-weight: 900 !important; } .montserratRegular{ font-family: 'Montserrat' !important; font-weight: 500 !important; } @-webkit-keyframes rotate-nonclockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg) } } @keyframes rotate-nonclockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg) } } @-webkit-keyframes rotate-clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes rotate-clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes pulse { 0%, to { opacity: 0 } 50% { opacity: 1 } } @-webkit-keyframes heartbeat { 0%, 60%, to { opacity: 0 } 10%, 50% { opacity: 1 } } @keyframes heartbeat { 0%, 60%, to { opacity: 0 } 10%, 50% { opacity: 1 } } @-webkit-keyframes fadeInQuestionsContent { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeInQuestionsContent { 0% { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadeInRight { 0% { -webkit-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0) } to { -webkit-transform: none; transform: none } } @keyframes fadeInRight { 0% { -webkit-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0) } to { -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInLeft { 0% { -webkit-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0) } to { -webkit-transform: none; transform: none } } @keyframes fadeInLeft { 0% { -webkit-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0) } to { -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-webkit-keyframes fadeInUp { 0% { -webkit-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0) } to { -webkit-transform: none; transform: none } } @keyframes fadeInUp { 0% { -webkit-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0) } to { -webkit-transform: none; transform: none } } @-webkit-keyframes zoom { 0% { opacity: 0; -webkit-transform: scale3d(.4, .4, .4); transform: scale3d(.4, .4, .4) } 50% { opacity: 1 } } @keyframes zoom { 0% { opacity: 0; -webkit-transform: scale3d(.4, .4, .4); transform: scale3d(.4, .4, .4) } 50% { opacity: 1 } } @keyframes pulse { 0%, to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } } @-webkit-keyframes ovl-open-fullscreen { 0% { opacity: 0 } to { opacity: 1 } } @keyframes ovl-open-fullscreen { 0% { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes ovl-close-fullscreen { 0% { opacity: 1 } to { opacity: 0 } } @keyframes ovl-close-fullscreen { 0% { opacity: 1 } to { opacity: 0 } } .verification { position: relative } .verification__button .btn { margin-top: 0; margin-bottom: 0 } .verification__hint { margin-top: 25px; margin-bottom: 0; color: #949494 } .verification--verifying { cursor: default; pointer-events: none } .verification--verifying .btn { margin: 0; color: #949494 } .verification--verifying .icon { -webkit-animation: rotate-clockwise 1s forwards infinite linear; animation: rotate-clockwise 1s forwards infinite linear } .verification--success .icon { color: #1ab0ff } .ovl__frame { position: relative; margin: auto; border-radius: 10px; background: #fff; opacity: 0; white-space: normal; -webkit-animation: ovl-close .2s; animation: ovl-close .2s } .ovl__frame.in-transition { overflow: hidden; transition: all .2s } .ovl__frame-inner { z-index: 1; transition: all .2s } .ovl__frame-loader { display: none } .ovl__scroll-tools { margin-bottom: 20px } .ovl__scroll { position: relative; max-height: inherit; height: inherit; margin-right: -40px; margin-left: -40px } .ovl__scroll-inner { margin-right: 40px; margin-left: 40px } .ovl__body--narrow .ovl__scroll-inner { margin-right: 20px; margin-left: 20px } .ovl__body { width: 600px } .ovl__body--match, .sticker-offer__img>img { position: relative } .ovl__body--narrow { width: 400px } .ovl__body--react { width: auto } .ovl__body--wide { width: 740px } .ovl__body--verified .ovl__actions { margin-bottom: 0 } .ovl__body--verified .verify-form { margin-right: -50px; margin-left: -50px } .ovl__body--permissions .ovl__header { margin-top: 70px; margin-bottom: -10px } .ovl__body--permissions .ovl__actions { margin-bottom: 50px } .ovl__body--permissions .brick-img::before { box-shadow: none } .ovl__body--resend-email .ovl__header { padding: 40px 80px 0; text-align: center } .ovl__body--resend-email .ovl__header-title { margin: 0; color: #303030; font-size: 24px; line-height: 36px } .ovl__body--resend-email .ovl__header-caption { margin: 0; color: #6a6a6a; font-size: 15px; line-height: 22px } .ovl__body--resend-email .ovl__header+.ovl__content { margin-top: 20px } .ovl__body--resend-email .ovl__header-title+.ovl__header-caption { margin-top: 4px } .ovl__body--resend-email .ovl__hint-inner { max-width: 440px; margin: 0 auto; font-size: 13px; line-height: 20px } .ovl__body--nocam .ovl__header-content>img, .ovl__promo>video { border-radius: 10px 10px 0 0 } .ovl__close { position: absolute; z-index: 1; top: 20px; right: 20px; display: -webkit-inline-flex; display: inline-flex; opacity: .8; transition: opacity .2s; cursor: pointer } .ovl__close:hover, .payment-method__item.active .payment-method__logo>img+img, .payment-method__item:hover .payment-method__logo>img+img { opacity: 1 } .chrome .ovl__close, .safari .ovl__close { transition: none } .ovl__header { border-radius: 10px 10px 0 0; color: #303030 } .ovl__header-desc { z-index: 1; min-height: 60px; padding: 20px 50px; color: #6a6a6a; font-size: 1.08em; line-height: 1.25 } .ovl__header-content, .ovl__header-desc { position: relative; text-align: center } .ovl__header-content>.brick { margin-top: 0; margin-bottom: 0 } .ovl__header-icon { position: absolute; right: 0; bottom: 50%; left: 0; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin: auto; -webkit-transform: translateY(50%); transform: translateY(50%) } .ovl__header--fill { display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; align-items: center; height: 70px; padding: 0 60px 0 30px; background: #7000e3; color: #fff } .ovl__header--fill .ovl__title { padding: 0 } .ovl__header--fill~.ovl__close { top: 27px; color: #fff } .ovl__header--space { margin: 40px 70px } .ovl__body--lookalikes-error .ovl__content>p, .ovl__media { margin-bottom: 30px } .ovl__media>.brick { margin: 0 } .ovl__media-title { margin: 10px 0 0 } .ovl__title { margin: 0; padding: 23px 60px 23px 30px; text-align: left; font-size: 1.3em; line-height: 1.2 } .ovl__title.center { text-align: center } .ovl__title-appendix { color: #95b2fc } .ovl__title-link { color: inherit; cursor: pointer } .ovl__title-link:hover { color: #fff } .ovl__content { margin: 40px; color: #303030 } .ovl__content .form-label { width: 30% } .ovl__content-loader { position: relative; height: 130px } .ovl__content--space { margin: 60px 70px } .ovl__banner+.ovl__content { margin-top: 0 } .ovl__carousel { margin: 20px -40px } .ovl__photobooth { margin: -40px -40px 0 } .ovl__promo { position: relative; padding: 40px; border-radius: 10px 10px 0 0; background: #262b37; color: #fff } .ovl__promo>.brick { margin-bottom: 20px } .ovl__promo>.brick+.brick { vertical-align: middle } .ovl__promo>video { margin: -40px } .chrome .ovl__promo { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .ovl__promo--red { width: 400px; height: 400px; background: radial-gradient(#f4675c, #d72f28) } .ovl__promo--red>video { position: absolute; top: 35px; left: 40px } .ovl__promo-label { position: absolute; right: -10px; bottom: 0; height: 32px; padding: 4px 7px 3px; border: 3px solid #fff; border-radius: 16px; background: #ff4000; color: #fff } .ovl__photos { position: relative; z-index: 1; overflow: hidden; width: 600px; height: 315px; border-radius: 10px 10px 0 0 } .ovl__photos-arrow { position: absolute; z-index: 1; top: 50%; margin-top: -16px } .loading .ovl__photos-arrow { display: none } .ovl__photos-arrow--left { left: 30px } .ovl__photos-arrow--right { right: 30px } .ovl__photos-img { position: absolute; top: 0; right: 0; left: 0; width: auto; height: 100%; margin: 0 auto; opacity: 0; visibility: hidden; transition: opacity .5s linear } .ovl__actions { position: relative; margin: 40px; text-align: center } .ovl__actions .btn { vertical-align: top; margin-top: 0; margin-bottom: 0 } .ovl__content+.ovl__actions { margin-top: -10px } .ovl__buttons { display: inline-block; vertical-align: top; width: 100%; margin: -10px 0 0 } .ovl__buttons .btn { margin-top: 10px } .ovl__buttons--narrow { width: auto } .ovl__buttons--narrow .btn { display: block; margin-left: 0 } .ovl__actions-hint, .ovl__hint { margin: 20px 0 -10px; color: #6a6a6a } .ovl__hint { margin: -40px 0 0; padding: 20px 20px 30px; font-size: 13px; line-height: 1.4 } .ovl__hint:empty { display: none } .ovl__hint+.ovl__hint { margin-top: -30px } .ovl__hint--cost { overflow: hidden; border-radius: 0 0 10px 10px; font-weight: 300; font-size: 12px } .ovl__hint--cost>.service-cost { margin: -20px -20px -30px; font-size: 1.1669em } .ovl__hint--grey { margin-top: -10px; padding: 20px 30px; border-top: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 10px 10px; background: #f7f7f7; color: #949494 } .ovl__banner { border-bottom: 1px solid rgba(0, 0, 0, .15); text-align: left } .ovl__banner>.banner { background: #fff } .ovl__counter { display: inline-block; padding: 15px 85px; border-radius: 16px; background: #f7f7f7; text-align: center; font-size: 45px } .ovl__countdown { margin-bottom: 10px } .ovl__countdown:empty { display: none } .abtest-web_new_registration_flow--simple .ovl__content+.ovl__actions { margin-top: -16px } .ovl__body--privacy-policy .ovl__header { padding: 0 20px } .ovl__body--privacy-policy .ovl__header-content { min-height: auto; border-bottom: 1px solid #ddd } .ovl__body--privacy-policy .ovl__title { text-align: center } .ovl__body--privacy-policy .ovl__content { max-height: 500px; margin-top: 24px; margin-bottom: 24px; text-align: left } .ovl__body--privacy-policy .ovl__scroll-inner { margin-right: 20px; margin-left: 20px } .ovl__body--privacy-policy .scroll.is-visible::before { height: 40px; background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff) } .ovl__body--privacy-policy .scroll.is-visible::after, .profile-quality .scroll.is-visible::after { height: 40px; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)) } .ovl__body--ads-preferences .ovl__title { padding-top: 32px; padding-bottom: 0; text-align: center } .ovl__body--facebook-failure .ovl__content h1 { margin-bottom: 12px; font-size: 20px } .sign-features { margin: 25px 0; padding: 15px 0; border-top: 1px solid rgba(0, 0, 0, .15); border-bottom: 1px solid rgba(0, 0, 0, .15); text-align: left } .sign-features__item { position: relative; margin: 10px 10px 10px 20px; padding: 0 0 0 22px } .sign-features__item::before { position: absolute; top: 4px; left: 0; width: 12px; height: 12px; content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAZElEQVQokWP4k26/CIifALErAw4AlPMG4udAPAfEeQvE/4H4GxB74FD8E6rmIUjAA0kARROaYpCcE0wCXZMrTsVIpqFrwq0Yhya4bbgCgzQNJDmJJE+THKxA4hUJEXePgdSkAQAALuInJIwqdgAAAABJRU5ErkJggg==) no-repeat } .sign-email { display: inline-block; width: 100%; padding: 18px 15px 10px; border-radius: 15px; background: #ebedf2 } .sign-email>span { display: inline-block; overflow: hidden; max-width: 100%; text-overflow: ellipsis } .help-text table td, .sign-email__item { padding: 5px 0 } .sign-separator { position: relative; min-height: 1px; margin: -10px 0 -20px } .sign-separator::before { position: absolute; top: 50%; left: 0; width: 100%; content: ''; border-bottom: 1px solid rgba(0, 0, 0, .15) } .sign-separator__txt { position: relative; display: inline-block; padding: 0 20px; background: #fff; color: #949494; font-size: .786em } .select-location { text-align: left } .select-location .ovl__scroll { max-height: 360px; height: 360px } .select-location__search { margin: 0 auto 20px } .select-location__item { position: relative; display: block; overflow: hidden; padding: 6px 0 6px 10px; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2857; cursor: pointer } .select-location__item:hover { background: #f7f7f7; color: #7000e3 } .select-location__item.active { color: #949494 } .stars { position: relative; width: 320px; height: 44px; margin: 0 auto; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/stars.c16ab85af38f705ced49.png) 0 0 repeat-x } .stars .blocker { z-index: 6 } .stars__star { position: absolute; left: 0; box-sizing: content-box; width: 64px; height: 44px; cursor: pointer } .stars__star:hover { background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/stars.c16ab85af38f705ced49.png) 0 -44px repeat-x } .stars__star:first-child { z-index: 5 } .stars__star:first-child+.stars__star { z-index: 4; padding: 0 0 0 64px } .stars__star:first-child+.stars__star+.stars__star { z-index: 3; padding: 0 0 0 128px } .stars__star:first-child+.stars__star+.stars__star+.stars__star { z-index: 2; padding: 0 0 0 192px } .stars__star:first-child+.stars__star+.stars__star+.stars__star+.stars__star { z-index: 1; width: 44px; padding: 0 0 0 276px } .share-likes { margin: 0 -50px } .share-likes .like-wrap { position: relative; display: inline-block; width: 170px; margin: 5px; padding: 0 20px 3px; border: 1px solid transparent; border-radius: 50px; line-height: 3.2144; cursor: default } .like-wrap--vkontakte { background: #e3ecf7 } .like-wrap--vkontakte:hover { border: 1px solid #aec1d5 } .like-wrap--facebook { background: #eff3ff } .like-wrap--facebook:hover { border: 1px solid #96a6e1 } .like-wrap--youtube { background: #ffeae8 } .like-wrap--youtube:hover { border: 1px solid #f7a59d } .like-wrap--google-plus { background: #ffe3dc } .like-wrap--google-plus:hover { border: 1px solid #ea9984 } .like-wrap--twitter { background: #e8f9ff } .like-wrap--twitter:hover { border: 1px solid #6abae3 } .like-wrap--trustpilot { position: relative; background: #e7eff7 } .like-wrap--trustpilot:hover { border: 1px solid #657e95 } .five-stars__feedback { height: 160px } .share-item { position: relative; display: inline-block; font-size: 14px; line-height: 1 } .share-likes .like-wrap_, .share-likes .like-wrap_ .like-btn, .share-likes .like-wrap_ .like-counter { box-sizing: content-box } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .stars, .stars__star:hover { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/stars@x2.3f647afa7319f6f7460c.png); background-size: 64px 88px } } .report { text-align: left } .report__list { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } .report__list .radio-field__text { pointer-events: none } .report--grey { padding: 20px 30px; border-radius: 12px; background: #eee } .report__comment { max-height: 0; padding: 0; opacity: 0; visibility: hidden; transition: max-height .2s ease-in-out, padding .2s ease-in-out, opacity .2s ease-in-out, visibility .2s } .report--comment .report__comment, .report-user .report__comment { max-height: 120px; padding: 10px 0 0; opacity: 1; visibility: visible } .report__comment .char-counter { margin: 0 5px 0 0; text-align: right } .delete-profile { padding: 0 30px } .delete-profile::before { position: absolute; top: 73px; left: 0; width: 75px; height: 156px; content: ''; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/settings/icon-delete-profile.975209799d380df75568.png) } .delete-profile--new-delete-flow::before { display: none } .delete-profile--new-delete-flow .radio-field, .ovl__body--lookalikes-share .ovl__media img { width: 100% } .delete-profile--new-delete-flow .delete-report-item__title { font-weight: 600 } .delete-profile--new-delete-flow .delete-report-item, .delete-profile--new-delete-flow .delete-report-item__caption, .delete-profile--new-delete-flow .delete-report-item__title { display: block } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .delete-profile::before { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/settings/icon-delete-profile@2x.c8b687a4568d87d32c3a.png); background-size: 200px 168px } } .delete-profile__reason-hint { position: relative; overflow: hidden; max-height: 0; opacity: 0; transition: all .2s } .delete-profile__reason-hint_ { display: inline-block; margin: 7px 0 7px 33px; padding: 12px 15px 12px 45px; border-radius: 8px; background: var(--color-yellow-500) } .delete-profile__reason-icon { position: absolute; top: 25px; left: 45px } .delete-profile__reason.is-opened .delete-profile__reason-hint { max-height: 300px; opacity: 1 } .delete-profile__spp { padding: 20px; border-radius: 8px; background: var(--color-yellow-500) } .delete-profile__icon { margin: -48px 0 0; color: #fff } .ovl__header--whats-new { -webkit-justify-content: flex-start; justify-content: flex-start; padding: 0 30px } .whats-new { position: relative; overflow: hidden } .whats-new--no-header .whats-new__img { border-radius: 10px 10px 0 0 } .whats-new__img { max-width: calc(100% + 80px); min-height: 100px; margin: -40px -40px 30px } .whats-new__control { position: absolute; z-index: 2; top: 0; width: 120px; height: 300px } .whats-new__control:hover .whats-new__control-icon { opacity: 1; -webkit-transform: scaleY(.7); transform: scaleY(.7) } .whats-new__control--prev { left: 0 } .whats-new__control--next { right: 0 } .whats-new__control-icon { position: absolute; top: 50%; left: 40px; width: 17px; height: 47px; margin-top: -24px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAABeCAMAAADyvQ9xAAAAZlBMVEUAAAAjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCYjJCZYyo7fAAAAIXRSTlMABCLA8zn8+e3cYUsuGRIL4tCjhnnKs5mRbVm5QueoaVHoYshRAAAA/0lEQVQ4y82Uy7ZDQBBF0TTtHYmEEOz//8k7vVU9aMkkMdxLWeexnEg+1XhI0BQskmxwyBu4C9D1pI0gE+wCZBYT/wfxhbwWr9zgKkCS42JBDGQClPDQ8l+tIAM8P5A/a/nj2/JTfPmrlj/IsHtIJNm1xSg22EyiOucSS3SFm7pz5OrjGRhJogeUkrQvikaiJ2zq7g5VpAPoO4lmmJSoEVsrM/aEmc6RKjMrLErU4JspKFrPzKDuFli1GS+p0s3RMVb61AvrOBNW44e1w/T95gNhBcwEmvfMfNy8CTafQK8M/85KbadWKnl/peyJlerCK+X9Q8GR1f+i8VqbnWroD6pJH74ZqDyBAAAAAElFTkSuQmCC) no-repeat 0 0; opacity: .2; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; pointer-events: none } .whats-new__control-icon--right { right: 40px; left: auto; background-position: 0 -47px } .sticker-offer, .sticker-offers { display: -webkit-flex; display: flex } .sticker-offers { -webkit-justify-content: center; justify-content: center; -webkit-align-items: stretch; align-items: stretch; -webkit-align-content: stretch; align-content: stretch } .sticker-offer { position: relative; z-index: 1; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 120px; flex: 1 0 120px; padding: 0 10px 10px; border-radius: 5px; background: #fff; text-align: center; transition: box-shadow .1s } .sticker-offer:not(:only-child):hover { z-index: 2; box-shadow: 0 0 8px rgba(0, 0, 0, .2) } .sticker-offer__img { position: relative; display: block; -webkit-flex: 0 0 auto; flex: 0 0 auto } .sticker-offer__img::before { position: absolute; right: 0; bottom: 2px; left: 0; width: 120px; height: 25px; margin: auto; content: ''; border-radius: 100%; background: #f2f2f2 } .sticker-offer__info { -webkit-flex: 1 0 auto; flex: 1 0 auto; margin: 10px 10px 5px } .sticker-offer__bought { display: none; padding: 11px 0 } .sticker-offer--bought .sticker-offer__btn { display: none } .sticker-offer__bought-icon { display: -webkit-inline-flex; display: inline-flex; vertical-align: -7px; margin: 0 0 2px 3px } .sticker-offer--bought:hover { z-index: auto; box-shadow: none } .sticker-offer--bought .sticker-offer__bought { display: block } .payment-promo-ovl { position: relative } .payment-promo-ovl>.payment-info { margin: 0 -10px } .payment-promo-ovl>.payment-info--unsubscribe { margin-bottom: 20px } .payment-promo-ovl .payment-info__item { width: 168px; margin: 0 } .payment-promo-ovl .payment-info__item+.payment-info__item { margin: 0 0 0 12px } .payment-promo-ovl__icon { position: absolute; z-index: 1; top: -66px; left: 50%; color: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .location-option, .location-options { display: -webkit-flex; display: flex } .location-option { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex: 1 1 100%; flex: 1 1 100%; padding: 12px 25px 5px } .location-options__or { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center } .location-options__or::before { position: absolute; top: 0; bottom: 0; left: 0; box-sizing: border-box; width: 50%; content: ''; border-right: 1px solid #d4d5d6 } .location-options__or_ { position: relative; padding: 10px 0; background: #fff } .location-distance { position: relative; width: 400px; height: 180px; margin: auto } .location-distance::after { position: absolute; bottom: 4px; left: 50%; width: 250px; height: 3px; content: ''; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/location/location-distance-bg.3b8d0496cdd572eb48c0.svg) 0 0 repeat-x; background-size: 10px 3px; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .location-distance__user { position: absolute; bottom: 5px; width: 134px; height: 156px; padding: 7px; background-position: 0 0; background-repeat: no-repeat; background-size: cover } .location-distance__user--self { left: 0 } .location-distance__user--other { right: 0 } .location-distance__img { position: relative; z-index: 2; width: 120px; height: 120px; border-radius: 100% } .location-distance__pin { position: absolute; z-index: 1; top: 0; left: 0; width: inherit; height: inherit; fill: #c9c9c9 } .location-distance__pin--primary { fill: #7000e3 } .location-nearby { height: 180px; text-align: center } .location-nearby>img { position: absolute; right: 0; bottom: 43px; left: 0; width: 381px; height: 156px; margin: 0 auto } .location-nearby::before { position: absolute; right: 0; bottom: 0; left: 0; height: 168px; content: ''; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/location/location-nearby-bg.1f7452cab5b6d0d1bef9.png) 50% 100% } .help-text li, .location-timer { margin: 0 0 15px } .location-arrow { position: fixed; z-index: -1; display: none; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/location/location-arrows.7082adec27346321b97b.png) no-repeat } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .location-arrow { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/location/location-arrows@2x.7d1065a12babef185b96.png); background-size: 235px 105px } } .arr_ff .location-arrow, .arr_webkit .location-arrow { top: 145px; left: 270px; display: block; width: 73px; height: 105px; background-position: 0 0 } .arr_webkit .location-arrow { top: 115px; left: 450px } @media (max-width:1330px), (max-height:820px) { .arr_ff .location-arrow--webcam, .arr_webkit .location-arrow--webcam { top: 50px; left: calc(25vw - 150px); width: 44px; margin: 0 0 0 -22px; background-position: -146px 0 } } .arr_ie .location-arrow { bottom: 60px; left: 50%; display: block; width: 44px; height: 105px; margin: 0 0 0 -22px; background-position: -190px 0 } .badge-loading { position: relative; overflow: hidden; width: 220px; height: 220px; margin: 35px auto 15px } .badge-loading__bg { position: absolute; top: 0; left: 0; width: 220px; height: 440px; background-position: 0 100%; background-size: 220px 440px } .badge-loading__bg+.badge-loading__bg { top: auto; bottom: 0; height: 0 } .badge-loading__bg--shape1 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg1.4bebecb47eb217fd055c.png) } .badge-loading__bg--shape2 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg2.cc374bc04f3bb35a8c72.png) } .badge-loading__bg--shape3 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg3.9f2db616296160280bd4.png) } .badge-loading__bg--shape4 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg4.8e235f697be2103cff16.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .badge-loading__bg--shape1 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg1@2x.31552a305891418dc56e.png) } .badge-loading__bg--shape2 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg2@2x.e757e294042e608eae10.png) } .badge-loading__bg--shape3 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg3@2x.8258b739ba0995b7007a.png) } .badge-loading__bg--shape4 { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/awards/video-award-bg4@2x.918140fce7e4ffc95259.png) } } .profile-quality-ovl { position: relative; height: 620px; transition: height .2s } .profile-quality-ovl--education { height: 660px } .profile-quality-ovl .profile-quality-ovl__icon { margin-bottom: 40px } .profile-quality-ovl .ovl__header { padding-top: 30px } .profile-quality-ovl .ovl__content { margin-top: 20px } .profile-quality-ovl .ovl__scroll-inner { padding-top: 20px } .profile-quality-ovl .profile-quality { max-height: 320px } .profile-quality-ovl .ovl__header-desc { color: #fff } .profile-quality-ovl--photo>.ovl__header { background: #1f65f4 } .profile-quality-ovl--relationships>.ovl__header { background: #ff5a27 } .profile-quality-ovl--orientation>.ovl__header { background: #f04a6d } .profile-quality-ovl--height>.ovl__header { background: #42a5f5 } .profile-quality-ovl--weight>.ovl__header { background: #ffa912 } .profile-quality-ovl--body-type>.ovl__header { background: #7fc01a } .profile-quality-ovl--hair>.ovl__header { background: #42bff5 } .profile-quality-ovl--eyes>.ovl__header { background: #3cad41 } .profile-quality-ovl--living>.ovl__header { background: #2b65db } .profile-quality-ovl--children>.ovl__header { background: #ff599c } .profile-quality-ovl--smoking>.ovl__header { background: #b1b3cc } .profile-quality-ovl--alcohol>.ovl__header { background: #532bd5 } .profile-quality-ovl--languages>.ovl__header { background: #ffa200 } .profile-quality-ovl--interests>.ovl__header { background: #ff6f41 } .profile-quality-ovl--about>.ovl__header { background: #6524ce } .profile-quality-ovl--verify>.ovl__header { background: #25b4f6 } .profile-quality-ovl--education>.ovl__header { background: #256cf5 } .profile-quality-ovl--final>.ovl__header { background: #4d83f7 } .profile-quality-ovl__icon { position: relative; display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 10px 0 60px; opacity: .5 } .profile-quality-ovl__icon>img, .question-carousel-icon__item>img { width: 100%; height: 100% } .profile-quality-ovl__icon:nth-child(2) { width: 64px; height: 64px; margin-right: 40px; margin-left: 40px; opacity: 1 } .profile-quality { max-height: 305px; margin-top: -20px } .profile-quality-ovl--final .profile-quality { max-height: 340px } .profile-quality-ovl--education .profile-quality { overflow: visible } .profile-quality-ovl--relationships .radio-field:hover, .profile-quality-ovl--relationships .radio-field__input:checked+.radio-field__label { color: #ff5a27 } .profile-quality-ovl--orientation .radio-field:hover, .profile-quality-ovl--orientation .radio-field__input:checked+.radio-field__label { color: #f04a6d } .profile-quality-ovl--hair .radio-field:hover, .profile-quality-ovl--hair .radio-field__input:checked+.radio-field__label { color: #42bff5 } .profile-quality-ovl--eyes .radio-field:hover, .profile-quality-ovl--eyes .radio-field__input:checked+.radio-field__label { color: #3cad41 } .profile-quality-ovl--living .radio-field:hover, .profile-quality-ovl--living .radio-field__input:checked+.radio-field__label { color: #2b65db } .profile-quality-ovl--body-type .radio-field:hover, .profile-quality-ovl--body-type .radio-field__input:checked+.radio-field__label { color: #7fc01a } .profile-quality-ovl--children .radio-field:hover, .profile-quality-ovl--children .radio-field__input:checked+.radio-field__label { color: #ff599c } .profile-quality-ovl--languages .radio-field:hover, .profile-quality-ovl--languages .radio-field__input:checked+.radio-field__label { color: #ffa200 } .profile-quality-ovl--smoking .radio-field:hover, .profile-quality-ovl--smoking .radio-field__input:checked+.radio-field__label { color: #b1b3cc } .profile-quality-ovl--alcohol .radio-field:hover, .profile-quality-ovl--alcohol .radio-field__input:checked+.radio-field__label { color: #532bd5 } .profile-quality-ovl--height .slider-mover, .profile-quality-ovl--weight .slider-mover { border: 0 } .profile-quality-ovl--height .slider-mover, .profile-quality-ovl--height .slider-track { background: #42a5f5 } .profile-quality-ovl--weight .slider-mover, .profile-quality-ovl--weight .slider-track { background: #ffa912 } .profile-quality-ovl--interests .pills { -webkit-justify-content: center; justify-content: center; margin-right: -4px; margin-left: -4px } .profile-quality-ovl--interests .pills__item { margin-right: 4px; margin-left: 4px } .profile-quality-ovl--interests .pill--copy.is-active, .profile-quality-ovl--interests .pill--copy:hover { background-color: #e6643b } .profile-quality-ovl--interests .pill--copy:active { background-color: #cc5934 } .profile-quality-ovl--interests .profile-quality__skip>.p-link { color: #ff6f41 } .profile-quality-ovl--interests .profile-quality__skip>.p-link:hover { border-color: #e6643b; color: #e6643b } .profile-quality__content { padding: 0 20px; text-align: left } .profile-quality__upload { margin: 35px 0 5px } .profile-quality__upload>.btn { width: 70px; height: 70px } .loading .profile-quality__upload>.btn>.icon, .profile-quality-pagination__btn .btn.disabled { opacity: 0 } .profile-quality__error { margin: 15px 0 0; color: #ff4000 } .profile-quality__photo { position: relative; margin: 30px 0 15px } .profile-quality__photo::before { position: absolute; top: -6px; right: 0; left: 0; width: 110px; height: 4px; margin: 0 auto; content: ''; background: #edf0f4 } .profile-quality__radio { position: relative; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #e6e6e6; text-align: left } .profile-quality__radio:first-child { margin: 0; padding: 0; border: 0 } .profile-quality__slider { margin: 35px 0 25px } .profile-quality__slider-value { margin: 0 0 10px; font-size: 2.857em; line-height: 1.15 } .help-text h1, .profile-quality__slider-switcher { margin: 0 0 25px } .profile-quality__skip { margin: 16px 0 0 } .profile-quality__verify { margin: 0 auto } .profile-quality__progress { margin: 15px 0 10px } .profile-quality__interests { padding: 20px 0 0 } .profile-quality__textarea { height: 160px } .profile-quality-pagination { position: absolute; z-index: 1; right: 20px; bottom: 20px; left: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center } .profile-quality-pagination__btn { -webkit-flex: 0 0 auto; flex: 0 0 auto } .profile-quality-pagination__btn .btn { margin: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, .04); color: #c4c4c4; transition: all .2s ease-in-out } .profile-quality-pagination__btn.is-shown .btn { border-color: transparent; color: #fff } .profile-quality-pagination__btn:not(.is-shown) .btn:hover { border-color: transparent; background: #e5e5e5; box-shadow: none; color: #303030; transition: all .2s ease-in-out } .profile-quality-pagination__btn:not(.is-shown) .btn:hover .icon { fill: #303030 } .profile-quality-pagination__counter { color: #c9c9c9 } .ribbon { position: absolute; top: 50px; left: -6px } .ribbon::before { position: absolute; bottom: -7px; left: 0; width: 0; height: 0; content: ''; border-width: 7px 6px 7px 0; border-style: solid } .ribbon__txt { position: relative; display: inline-block; height: 29px; padding: 10px 13px; border-radius: 0 8px 8px 0; font-weight: 300; font-size: .857em; line-height: .84 } .ribbon--red::before { border-color: transparent #af0808 transparent transparent } .ribbon--red .ribbon__txt { background: #f02139; color: #fff } .ovl-get-apps { margin: 0 -40px -40px; padding: 25px 40px; border-top: 1px solid #ebebeb; border-radius: 0 0 10px 10px; background: #f7f7f7; color: #949494 } .get-apps, .get-apps__item { display: -webkit-flex; display: flex } .get-apps { -webkit-justify-content: center; justify-content: center } .get-apps__item { -webkit-align-items: center; align-items: center; color: currentColor } .get-apps__item:hover { color: #7000e3 } .get-apps__item+.get-apps__item { margin-left: 30px } .get-apps__item-icon { display: -webkit-flex; display: flex; -webkit-flex: 0 0 auto; flex: 0 0 auto; pointer-events: none } .get-apps__item-icon+.get-apps__item-title { margin-left: 5px } .get-apps__item-title { font-weight: 400; pointer-events: none } .get-apps__item-title--appstore { width: 71px; height: 22px } .get-apps__item-title--gplay { width: 80px; height: 22px } .photo-quality-good { padding: 35px 0 30px } .photo-quality-good__item { position: relative; z-index: 2; display: inline-block; border: 4px solid #fff; box-shadow: 0 0 0 1px #e7e7e7, 0 1px 5px 1px rgba(0, 0, 0, .12) } .photo-quality-good__item+.photo-quality-good__item { z-index: 1; top: -5px; margin: 0 0 0 -70px; -webkit-transform: rotate(15deg); transform: rotate(15deg) } .photo-quality-good__item .photo-coaching { position: absolute; right: 0; bottom: 10px; left: 0; margin: 0 auto; pointer-events: none } .photo-quality-bad { margin: 15px 0 0 -5px } .photo-quality-bad__item { position: relative; display: inline-block; vertical-align: top; margin: 5px 0 0 5px } .photo-quality-bad__item .checkbox-field { position: absolute; z-index: 2; right: 5px; bottom: 0 } .photo-quality-bad__item .checkbox-field__icon { box-shadow: 0 0 0 2px #fff } .questions-ovl { position: relative; overflow: hidden; height: 490px } .questions-ovl>.ovl__header { padding-top: 70px; background: 50% calc(50% + 35px) url("data:image/svg+xml, %3Csvg%20viewBox%3D%220%200%20600%20500%22%20width%3D%22600%22%20height%3D%22500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M600%20217v282c0%20.6-.4%201-1%201H1c-.6%200-1-.4-1-1V217s115.7%2033%20300%2033%20300-33%20300-33z%22%2F%3E%20%3C%2Fsvg%3E"); background-size: cover; transition: background-color .4s } .questions-ovl .ovl__header-content { min-height: 90px } .questions-ovl--travel>.ovl__header { background-color: #ffa200 } .questions-ovl--dating>.ovl__header { background-color: #f04a6d } .questions-ovl--sport>.ovl__header { background-color: #1f65f4 } .questions-ovl--food-drink>.ovl__header { background-color: #7fc01a } .questions-ovl--lifestyle>.ovl__header { background-color: #42bff5 } .questions-ovl--entertainment>.ovl__header { background-color: #6524ce } .questions-ovl__back { position: absolute; bottom: 35px; left: 40px } .questions-ovl-content { position: relative; height: 260px; margin-top: -40px } .questions-ovl-content__item>.form { padding: 0 40px 0 50px } .questions-ovl-content .radio-field__icon+.radio-field__text { margin-left: 10px } .questions-ovl-content__title-animate { -webkit-animation: fadeInDown .4s; animation: fadeInDown .4s } .question-carousel-icon { position: absolute; top: -70px; right: 0; left: 0; width: 192px; height: 115px; margin: 0 auto } .questions-ovl--final-screen { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center } .question-carousel-icon__item { position: absolute; top: 0; bottom: 0; width: 32px; height: 32px; margin: auto; opacity: .5; transition: all .4s } .question-carousel-icon__item:first-child, .question-carousel-icon__item:last-child, .questions-ovl.animation-left .question-carousel-icon__item:nth-child(2), .questions-ovl.animation-right .question-carousel-icon__item:nth-child(4) { opacity: 0 } .question-carousel-icon__item:last-child, .question-carousel-icon__item:nth-child(4), .questions-ovl.animation-left .question-carousel-icon__item:last-child { right: 0 } .question-carousel-icon__item:nth-child(2), .questions-ovl.animation-left .question-carousel-icon__item:nth-child(2), .questions-ovl.animation-left .question-carousel-icon__item:nth-child(3), .questions-ovl.animation-right .question-carousel-icon__item:first-child { left: 0 } .questions-ovl.animation-left .question-carousel-icon__item:last-child, .questions-ovl.animation-left .question-carousel-icon__item:nth-child(3), .questions-ovl.animation-right .question-carousel-icon__item:first-child, .questions-ovl.animation-right .question-carousel-icon__item:nth-child(3) { opacity: .5; -webkit-transform: scale(1); transform: scale(1) } .question-carousel-icon__item:nth-child(3), .questions-ovl.animation-left .question-carousel-icon__item:nth-child(4), .questions-ovl.animation-right .question-carousel-icon__item:nth-child(2) { opacity: 1; -webkit-transform: scale(2); transform: scale(2) } .question-carousel-icon__item:nth-child(3), .questions-ovl.animation-right .question-carousel-icon__item:nth-child(2) { left: 80px } .questions-ovl.animation-left .question-carousel-icon__item:nth-child(4) { right: 80px } .questions-ovl.animation-right .question-carousel-icon__item:nth-child(3) { left: 160px } .questions__circles { position: absolute; border: 6px solid transparent; border-radius: 50% } .questions__circles--lg { top: -95px; left: -60px; width: 146px; height: 146px; border-color: #42a5f5; -webkit-animation: fadeInDown .4s; animation: fadeInDown .4s } .questions__circles--md { top: 55px; right: -50px; width: 74px; height: 74px; border-color: #f04a6d; -webkit-animation: fadeInRight .4s; animation: fadeInRight .4s } .questions__circles--sm { bottom: -60px; left: 70px; width: 95px; height: 95px; border-color: #ffb900; -webkit-animation: fadeInUp .4s; animation: fadeInUp .4s } .questions-matched-answers__bubble { position: relative; display: inline-block; border-radius: 20px } .questions-ovl__brick-animation { margin: 0 0 15px } .questions-ovl__brick-animation .brick-group__item:first-child { -webkit-animation: fadeInRight .4s; animation: fadeInRight .4s } .questions-ovl__brick-animation .brick-group__item:last-child { -webkit-animation: fadeInLeft .4s; animation: fadeInLeft .4s } .questions-matched-answers>.questions-matched-answers__bubble { position: relative; max-width: 250px; margin: 0 auto 10px; padding: 10px 15px; border-radius: 20px; background: #17d417; color: #fff } .questions-matched-answers__arrow { position: absolute; right: 0; bottom: -8px; left: 0; width: 20px; height: 8px; margin: auto; background: #17d417 } .questions-matched-answers__arrow::after, .questions-matched-answers__arrow::before { position: absolute; top: 0; width: 22px; height: 22px; content: ''; border-radius: 50%; background: #fff } .questions-matched-answers__arrow::before { left: -11px } .questions-matched-answers__arrow::after { right: -11px } .questions-matched-answers>.questions-matched-answers__bubble .brick:first-child { z-index: 2 } .questions-different-answers { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center } .questions-different-answers>.questions-different-answers__bubble { position: relative; max-width: 265px; padding: 8px 18px; border-radius: 20px; text-align: left; line-height: 1.2em } .questions-different-answers>.brick { -webkit-align-self: flex-end; align-self: flex-end } .questions-different-answers:not(:last-child) { margin: 0 0 14px } .questions-different-answers--single:not(:last-child) { -webkit-justify-content: center; justify-content: center; margin: -14px 0 14px } .questions-different-answers:nth-child(odd) { -webkit-flex-direction: row-reverse; flex-direction: row-reverse } .questions-different-answers:nth-child(even)>.questions-different-answers__bubble { margin: 0 0 0 12px; background: #fcdfdf } .questions-different-answers--single:nth-child(even)>.questions-different-answers__bubble, .questions-different-answers:nth-child(odd)>.questions-different-answers__bubble { background: #eee } .questions-different-answers:nth-child(odd)>.questions-different-answers__bubble { margin: 0 12px 0 0 } .questions-different-answers__dots::before { content: '\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022\2022' } .questions-different-answers>.questions-different-answers__bubble::after, .questions-different-answers>.questions-different-answers__bubble::before { position: absolute; bottom: 0; width: 35px; height: 25px; content: '' } .questions-different-answers:nth-child(even)>.questions-different-answers__bubble::before { left: -23px; height: 20px; background: #fcdfdf; clip: rect(4px, auto, auto, 15px); border-radius: 0 0 50% 0 } .questions-different-answers:nth-child(even)>.questions-different-answers__bubble::after { border-radius: 0 0 50% 0; bottom: -3px; left: -35px; background: #fff; clip: rect(4px, auto, auto, 25px) } .questions-different-answers--single:nth-child(even)>.questions-different-answers__bubble::before, .questions-different-answers:nth-child(odd) .questions-different-answers__bubble::before { background: #eee } .questions-different-answers:nth-child(odd) .questions-different-answers__bubble::before { right: -23px; height: 20px; clip: rect(4px, 20px, auto, auto) } .questions-ovl.animation-left .questions-ovl-content__item:last-child, .questions-ovl.animation-right .questions-ovl-content__item:first-child { position: relative; opacity: 1; -webkit-animation: fadeInQuestionsContent .5s ease-in-out; animation: fadeInQuestionsContent .5s ease-in-out } .questions-ovl-content__item:first-child, .questions-ovl-content__item:last-child, .questions-ovl.animation-left .questions-ovl-content__item:nth-child(2), .questions-ovl.animation-right .questions-ovl-content__item:nth-child(2) { position: absolute; top: 0; right: 0; left: 0; margin: auto; opacity: 0; -webkit-animation: none; animation: none } .questions-ovl-content__item:nth-child(2) { position: relative; z-index: 1 } .questions-ovl.show-animate .ovl__header-icon { -webkit-animation: fadeInQuestionsContent .5s; animation: fadeInQuestionsContent .5s } .questions-ovl.show-animate .questions-matched-answers>.questions-matched-answers__bubble { -webkit-animation: pulse .4s; animation: pulse .4s } .questions-ovl.show-animate .brick-group__item:first-child { -webkit-animation: fadeInRight .4s; animation: fadeInRight .4s } .questions-ovl.show-animate .brick-group__item:last-child { -webkit-animation: fadeInLeft .4s; animation: fadeInLeft .4s } .questions-ovl.show-animate .questions-different-answers { -webkit-animation: zoom .4s; animation: zoom .4s } .ie11 .questions-ovl .ovl__content { background: #fff } .ie11 .questions-ovl .questions-ovl-content { margin-top: -41px; background: #fff } .ovl__header--votes .brick-group__item { width: 96px; height: 96px } .ovl__header--votes .brick-group__item>.icon { overflow: hidden; border-radius: 100%; background: #fff } .ovl__header--votes .brick-group__item:nth-child(2) { width: 82.56px; height: 82.56px } .ovl__header--votes .brick-group__item:nth-child(2)>.icon { fill: rgba(255, 102, 27, .2) } .ovl__header--votes .brick-group__item:nth-child(3) { width: 72.96px; height: 72.96px } .ovl__header--votes .brick-group__item:nth-child(3)>.icon { fill: rgba(255, 102, 27, .1) } .ovl__header--votes .brick-group__item+.brick-group__item { margin-left: -32px } .ovl__body--lookalikes .ovl__content { margin: 30px 0 } .ovl__body--lookalikes .ovl__content>.icon { width: 100px; height: 100px; margin-bottom: 20px } .ovl__body--lookalikes-app { width: 800px } .lookalikes-get-app { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; color: #000 } .lookalikes-get-app__promo { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 50%; padding: 110px 0; border-right: 1px solid rgba(0, 0, 0, .08) } .lookalikes-get-app__form { width: 50%; padding: 40px } .lookalikes-get-app__user { width: 200px; height: 200px } .lookalikes-get-app__action .btn, .lookalikes-get-app__user>.brick { margin: 0 } .lookalikes-get-app__user-info { max-width: 260px; margin: 30px auto 0; word-wrap: break-word; font-size: 28px } .lookalikes-get-app__desc { max-width: 260px; margin: 15px auto 0; opacity: .6; font-size: 16px; line-height: 23px } .lookalikes-get-app__form, .lookalikes-get-app__form-wrap { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } .lookalikes-get-app__form-wrap { -webkit-justify-content: center; justify-content: center; -webkit-align-items: stretch; align-items: stretch; -webkit-flex: 1 0 auto; flex: 1 0 auto; width: 100% } .lookalikes-get-app__form-title { margin: 0 auto 25px; font-size: 28px } .lookalikes-get-app__action { margin: 15px 0 0 } .lookalikes-get-app__links { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex: 0 0 auto; flex: 0 0 auto } .lookalikes-get-app__links-title { width: 100%; margin-bottom: 15px; font-size: 14px } .ovl__body--lookalikes-share { width: 500px } .ovl__body--lookalikes-share .ovl__media { overflow: hidden; margin-top: -40px; margin-right: -40px; margin-left: -40px; border-radius: 10px 10px 0 0 } .lookalikes-share__caption { margin-bottom: 20px; font-size: 24px } .lookalikes-share__list { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .lookalikes-share__item { width: 84px; color: #949494; text-align: center; cursor: pointer } .lookalikes-share__item:hover { color: #4d4d4d } .lookalikes-share__item+.lookalikes-share__item { margin-left: 10px } .lookalikes-share__icon { width: 64px; height: 64px; margin: 0 auto; pointer-events: none } .lookalikes-share__item-title { display: block; margin-top: 8px; font-size: 13px; pointer-events: none } .ovl-match { padding: 50px 0; border-radius: 10px; background: #7000e3 } .ovl-match .ovl__header { position: relative; min-height: 180px } .ovl-match__photo { position: absolute; left: 50%; overflow: hidden; border-radius: 30px; -webkit-transform: rotate(-10deg) translate3d(-133px, -15px, 0); transform: rotate(-10deg) translate3d(-133px, -15px, 0) } .ovl-match__photo:not(.ovl-match__photo--current) { z-index: 1 } .ovl-match__photo--current { -webkit-transform: rotate(10deg) translate3d(-3px, 25px, 0); transform: rotate(10deg) translate3d(-3px, 25px, 0) } .ovl-match__message, .ovl-match__title { color: #fff } .ovl-match__message { font-size: 1.1em } .ovl-match__like { position: absolute; z-index: 1; bottom: 5px; left: 50%; display: -webkit-flex; display: flex; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .ovl-match__like>.icon { box-shadow: 0 4px 9px rgba(0, 0, 0, .2) } .ovl-match .ovl__content { margin: 30px 40px } .ovl-match__send-message { width: 450px; margin: auto } .ovl-match__send-message .form-field { width: 100%; margin: 0 } .ovl-match .ovl__actions { width: 280px; margin: auto } .ovl-match .ovl__actions .btn:not(:last-child) { margin-bottom: 10px } .ovl-match .brick--white::before { border-color: rgba(0, 0, 0, .1) } .upload-providers__title { margin-bottom: 20px; font-weight: 400; font-size: 16px } .upload-providers__items { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .upload-providers__item { width: 84px; color: #949494; text-align: center; cursor: pointer } .upload-providers__item:hover { color: #7000e3 } .upload-providers__item:hover .icon { background: 0 0; box-shadow: 0 0 0 1px currentColor inset; fill: currentColor } .upload-providers__item+.upload-providers__item { margin-left: 12px } .upload-providers__item-icon { margin: 0 auto; pointer-events: none } .upload-providers__item-title { font-size: 13px; pointer-events: none } .photo-upload-cta__drag-area { padding: 20px 24px; border: 2px dashed rgba(0, 0, 0, .15); border-radius: 10px; background: #f7f7f7; background-clip: border-box; transition: background .1s linear, border-color .1s linear } .photo-upload-cta__drag-area.has-drag { border-color: rgba(0, 0, 0, .15); background: #f2f2f2 } .photo-upload-cta__action .btn { margin: 0 } .photo-upload-cta__alternate-action { margin-top: 8px; margin-bottom: 0; color: #949494 } .photo-upload-cta__hint { margin-bottom: 0; color: #6a6a6a } .photo-upload-cta__import+.photo-upload-cta__drag-area { margin-top: 24px } .photo-upload-cta__drag-area+.photo-upload-cta__hint { margin-top: 20px } .external-providers { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center } .external-providers__hint { position: relative } .external-providers__item { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-flex: 0 0 auto; flex: 0 0 auto; cursor: pointer } .external-providers__item:hover .external-providers__text, .file-upload--profile-onboarding .file-upload__hint b:hover { color: #7000e3 } .external-providers__item:hover .external-providers__icon { background-color: #7000e3 } .external-providers__item:hover .icon { fill: #fff } .external-providers__icon { overflow: hidden; border: 1px solid transparent; border-radius: 100%; pointer-events: none } .external-providers__text { padding: 0 8px; font-size: 12px; line-height: 1.33; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none } .external-providers__icon+.external-providers__text { margin-top: 8px } .external-providers__item+.external-providers__item { margin-left: 16px } .external-providers--profile-onboarding { max-width: 320px } .external-providers--profile-onboarding .external-providers__item:nth-child(3n+1) { margin-left: 0 } .external-providers--profile-onboarding .external-providers__item:nth-child(n+4) { margin-top: 16px } .onboarding-tooltip { position: absolute; top: 50%; left: 0; width: 240px; margin-left: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .onboarding-tooltip::after, .onboarding-tooltip::before { position: absolute; top: 50%; left: 1px; width: 16px; height: 16px; content: ''; border: 1px solid; background: #fff; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .onboarding-tooltip::before { border-color: transparent transparent rgba(0, 0, 0, .08) rgba(0, 0, 0, .08); z-index: 1 } .onboarding-tooltip::after { z-index: -1; border-color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) } .onboarding-tooltip__inner { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; height: 100%; padding: 16px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) } .onboarding-tooltip__text { color: #000; text-align: left; font-size: 14px; line-height: 1.7 } .onboarding-tooltip--wide { width: 288px } .onboarding-tooltip[data-position=right] { left: 100%; margin-left: 32px } .onboarding-tooltip[data-direction=left] { margin-left: -256px } .onboarding-tooltip[data-direction=left]::after, .onboarding-tooltip[data-direction=left]::before { right: 0; left: auto } .onboarding-tooltip[data-direction=left]::before { border-color: rgba(0, 0, 0, .08) rgba(0, 0, 0, .08) transparent transparent } .onboarding-tooltip[data-direction=left]::after, .onboarding-tooltip[data-direction=left]::before { -webkit-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg) } .onboarding-tooltip[data-direction=left][data-position=left] { margin-left: -272px } .onboarding-tooltip__icon+.onboarding-tooltip__text { margin-left: 16px } .trigger-tooltip-hover { position: relative } .trigger-tooltip-hover::before { position: absolute; z-index: -1; top: 50%; right: -32px; width: 32px; height: 100%; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .trigger-tooltip-hover:hover .onboarding-tooltip { opacity: 1; pointer-events: auto } .trigger-tooltip-hover .onboarding-tooltip { opacity: 0; transition: opacity .4s; pointer-events: none } .trigger-tooltip-hover[data-direction=left]::before { right: 0; left: -32px } .onboarding-tooltip--stretch { width: auto; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%) } .onboarding-tooltip--stretch[data-direction=left][data-position=left] { margin-left: -16px } .onboarding-tooltip--bc { top: auto; bottom: -16px; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); transition: opacity .4s, margin .2s } .onboarding-tooltip--bc::after, .onboarding-tooltip--bc::before { top: auto; bottom: 16px; width: 12px; height: 12px } .file-upload-promo-wrapper { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; max-width: 384px; height: 164px; margin: 0 auto } .ie11 .file-upload-promo-wrapper { margin: 0 } .file-upload-page-wrapper { position: fixed; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; display: none; padding: 48px; background-color: rgba(255, 255, 255, .8); opacity: 0; transition: opacity .2s; pointer-events: none } .file-upload-page-wrapper.is-active { display: block; opacity: 1 } .file-upload, .file-upload__content-area { display: -webkit-flex; display: flex; width: 100%; height: 100% } .file-upload { border: 1px dashed rgba(0, 0, 0, .08); border-radius: 8px; background-color: #fff; color: #949494; padding: 8px; transition: color .2s, border-color .2s } .file-upload:hover { border: 1px dashed rgba(0, 0, 0, .15); color: #6a6a6a; cursor: pointer } .file-upload:hover .file-upload__content-area { background: #ddd } .file-upload__content-area { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-flex: 1 1 auto; flex: 1 1 auto; max-width: 100%; padding: 20px 25px; background: #f7f7f7; transition: background .2s } .file-upload__loader-text { max-width: 100%; font-size: 14px; line-height: 1.7 } .file-upload__loader-icon { position: relative; width: 100%; height: 40px } .file-upload__tooltip { position: relative } .file-upload__hint { max-width: 100%; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .file-upload__hint a { border-bottom: 1px solid rgba(106, 106, 106, .3); transition: color .2s, border-color .2s; cursor: pointer; text-decoration: none; color: #949494 } .file-upload__hint a:hover { border-color: currentColor; color: #7000e3 } .file-upload--draggable { border: 1px dashed rgba(112, 0, 227, .4); color: #7000e3 } .file-upload--draggable .file-upload__content-area { background: rgba(112, 0, 227, .04) } .file-upload--promo-onboarding { min-width: 384px } .file-upload--small .file-upload__content-area { padding: 12px } .file-upload--profile-onboarding, .file-upload--profile-onboarding:hover { border-color: #949494 } .file-upload--profile-onboarding:hover .file-upload__content-area { background: #f7f7f7 } .file-upload--profile-onboarding .file-upload__content-area { min-height: 160px; background: #fff; color: #6a6a6a; font-size: 16px; line-height: 1.5 } .file-upload--profile-onboarding .file-upload__hint b { color: #7000e3; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; cursor: pointer; text-decoration: none } .file-upload__error { color: #ff4101; font-size: 13px } .file-upload__hint+.file-upload__error, .file-upload__icon+.file-upload__error { margin-top: 12px } .upload-photos-wrapper { max-height: 327px } .upload-album { margin-right: -4px } .upload-album__photos::after { display: block; clear: both; overflow: hidden; height: 0; content: '' } .upload-photo, .upload-photo__photo { position: relative; width: 130px; height: 130px } .upload-photo { float: left; margin: 0 1px 1px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .upload-photo--deleting .upload-photo__photo { background: #000 } .upload-photo--deleting .upload-photo__photo img { opacity: .4 } .upload-photo__photo { overflow: hidden; transition: opacity .1s linear } .upload-photo__photo>img { position: absolute; top: -200px; right: -200px; bottom: -200px; left: -200px; width: auto; height: 130px; margin: auto } .upload-photo--vertical>.upload-photo__photo>img { width: 130px; height: auto } .upload-photo__progress { position: absolute; right: 0; bottom: 0; left: 0; display: none; height: 4px; background: #fff } .upload-photo__progress_ { position: absolute; top: 0; bottom: 0; left: 0; width: 0; height: 4px; background: #7000e3 } .upload-photo.loading>.upload-photo__progress { display: block } .upload-photo.inqueue>.upload-photo__photo, .upload-photo.loading>.upload-photo__photo { opacity: .5 } .upload-photo.error, .upload-photo.fatal { background: #4d4d4d } .upload-photo.error>.upload-photo__photo, .upload-photo.fatal>.upload-photo__photo { opacity: .3 } .import-contacts__item.disabled>.brick::after, .import-contacts__item.disabled>label, .upload-photo__retry { display: none } .upload-photo.error>.upload-photo__retry { display: block } .upload-photo__retry>.btn { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; margin: auto } .upload-photo__fatal { position: absolute; top: 50%; left: 50%; display: -webkit-flex; display: flex; visibility: hidden; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .upload-photo.fatal>.upload-photo__fatal { visibility: visible } .upload-photo__actions { position: absolute; top: 10px; right: 10px; display: none } .upload-photo:hover .upload-photo__actions { display: -webkit-flex; display: flex } .upload-photo__action { display: none; margin: 0 0 0 7px } .upload-photo__action>.btn { margin: 0 } .upload-photo.inqueue .upload-photo__action--delete, .upload-photo.ready .upload-photo__action--delete, .upload-photo.ready .upload-photo__action--private { display: -webkit-inline-flex; display: inline-flex } .upload-userpics { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .upload-userpics__item { width: 64px; height: 64px } .upload-userpics__item+.upload-userpics__item { margin-left: 10px } .upload-userpics__item>.brick { width: inherit; height: inherit; margin-top: 0; margin-bottom: 0 } .upload-userpics__item--empty { border-radius: 100%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer } .upload-userpics__item--empty>.icon { pointer-events: none } .photo-import { text-align: left } .photo-import .ovl__scroll { max-height: 430px } .photo-import__row+.photo-import__row { margin-top: 35px } .photo-import__items { margin: 10px 0 0 -5px } .photo-import__item { position: relative; display: inline-block; vertical-align: top; margin: 5px 0 0 5px } .photo-import__item .checkbox-field { position: absolute; z-index: 3; right: 5px; bottom: 0 } .photo-import__item .checkbox-field__icon { border-radius: 100%; box-shadow: 0 0 0 2px #fff } .photo-import__item.disabled .checkbox-field { border-color: transparent } .photo-import__item>.btn--ico { width: 100px; height: 100px; margin: 0; border-radius: 0 } .photo-import__img { position: relative; overflow: hidden; width: 100px; height: 100px } .photo-import__img>.icon, .photo-import__img>img { position: absolute; top: -500px; right: -500px; bottom: -500px; left: -500px; margin: auto } .photo-import__img>img { min-width: 100%; min-height: 100% } .photo-import__item>.blocker--light, .photo-import__item>.btn--ico::before { border-radius: 0 } .acc-selector { position: relative; margin: 20px -10px 30px } .acc-selector__item { display: inline-block; vertical-align: top; width: 84px; margin: 0 3px; text-align: center; line-height: 1.357 } .acc-selector__item-wrap { position: relative; margin: 0 -3px } .acc-selector__item:hover { color: #7000e3 } .acc-selector__item::after, .acc-selector__item::before { position: absolute; top: 100%; bottom: 100%; display: none; width: 0; height: 0; content: ''; border: solid transparent; pointer-events: none } .acc-selector__item::before { margin: -4px 0 0 31px; border-width: 11px; border-color: transparent transparent #dfdfdf } .acc-selector__item::after { margin: -2px 0 0 32px; border-width: 10px; border-color: transparent transparent #f7f7f7 } .acc-selector__item.active::after, .acc-selector__item.active::before { display: block } .acc-selector__item.disabled { cursor: default } .acc-selector__item.faded { color: inherit } .acc-selector__item.faded .social-ico { border-color: transparent; background: #bec4d1; color: #fff } .acc-selector__item.active .social-ico { border-color: transparent; background: #5a00b6; color: #fff } .acc-selector__form { margin: 17px -30px 0; padding: 15px 150px 15px 30px; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); background: #f7f7f7; text-align: left } .simple-promo .acc-selector { margin: 15px 0 } .simple-promo .acc-selector__form { margin: 17px 0; padding: 15px 120px 15px 30px } .acc-selector__button { padding: 0 0 0 120px } .acc-selector__ovl { margin: 40px 0 0 } .acc-selector__notice { padding: 10px 0 0 60px; color: #ff4000; text-align: center } .all-providers { margin: 20px 0 15px; text-align: center } .all-providers__more, .all-providers__provider { position: relative; display: inline-block; vertical-align: middle } .all-providers__provider { padding: 0 9px 0 8px } .all-providers__provider::after { position: absolute; top: 50%; right: 0; width: 1px; height: 20px; margin: -10px 0 0; content: ''; background: #dfdfdf } .all-providers__more { margin: 0 10px -4px } .import-contacts { position: relative; text-align: left } .import-contacts .ovl__scroll { height: 300px } .import-contacts__items { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: -20px; margin-right: -8px; margin-left: -8px } .import-contacts__item { position: relative; display: inline-block; vertical-align: top; width: 70px; margin: 20px 8px 0; text-align: center } .import-contacts__item>.brick { margin-top: 0 } .import-contacts__item--more .brick { background-color: #949494 } .import-contacts__item--more:hover .brick { background-color: #7000e3 } .import-contacts__item.loading .checkbox-field, .import-contacts__item.loading .icon { z-index: 1; opacity: 0 } .photo-rules { counter-reset: list1; text-align: left } .photo-rules__title { margin-bottom: 20px; text-align: center; font-size: 20px } .photo-rules__item { position: relative; padding-left: 50px; font-size: 16px } .photo-rules__confirm, .photo-rules__item::before { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center } .photo-rules__item::before { position: absolute; top: -5px; left: 0; -webkit-align-items: center; align-items: center; width: 32px; height: 32px; content: counter(list1); counter-increment: list1; border-radius: 100%; background: #4d4d4d; color: #fff; text-align: center; font-weight: 400; font-size: 14px } .photo-rules__item+.photo-rules__item { margin-top: 20px } .photo-rules__confirm { margin-top: 20px } .photo-rules__confirm .checkbox-field { margin: 0 } .wizard { min-width: 790px; border-radius: 10px } .wizard__content { position: relative; display: -webkit-flex; display: flex; border-radius: 0 0 10px 10px; text-align: left } .wizard-head { padding-top: 22px; padding-bottom: 23px; border-radius: 10px 10px 0 0; background: #7000e3; color: #fff; text-align: left } .wizard-head__title { margin: 0 0 0 30px } .wizard-common-details { position: relative; width: 100%; padding: 0 20px 20px; text-align: center } .payment-method~.wizard-common-details { padding: 0 20px 20px 130px } .wizard-common-details:empty { display: none } .payment-method~.wizard-common-details::before { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 110px; height: 100%; content: ''; border-right: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 0 10px; background: #f7f7f7 } .wizard-common-details .p-link::after { position: relative; right: -5px; display: inline-block; width: 0; height: 0; margin: 0 -8px 1px 0; content: ''; border-width: 0 4px 4px; border-style: solid; border-color: transparent transparent #999 } .wizard-common-details .p-link:hover::after { border-bottom-color: #7000e3 } .wizard--details .wizard-common-details .p-link::after { border-width: 4px 4px 0; border-color: #999 transparent transparent } .wizard--details .wizard-common-details .p-link:hover::after { border-color: #7000e3 transparent transparent } .wizard__details { position: relative; display: none; width: 790px; padding: 24px; border-top: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 10px 10px; background: #fff; text-align: left } .wizard--extra .wizard__details { width: 1060px } @media only screen and (max-width:1100px) { .wizard--extra .wizard__details { width: 790px } } .wizard--details .wizard__details { display: block } .wizard__details a { border-bottom: 1px solid rgba(77, 77, 77, .3); transition: color .2s, border-color .2s; cursor: pointer } .wizard__details a:hover { border-color: #7000e3; color: #7000e3 } @media only screen and (min-width:1100px) { .wizard--extra .wizard-blocker .blocker { right: 270px } } .wizard__payment { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 790px; min-height: 590px } .payment-method { width: 110px; border-right: 1px solid rgba(0, 0, 0, .15); background: #f7f7f7 } .payment-method__list { margin: 0; padding: 10px 0; list-style: none } .payment-method__item { position: relative; width: 100%; padding: 10px 0; text-align: center } .payment-method__item.active::before { right: 0 } .payment-method__item.active::after, .payment-method__item.active::before { position: absolute; top: 50%; width: 0; height: 0; content: ''; border-width: 8px 8px 8px 0; border-style: solid; border-color: transparent #d2d2d2 transparent transparent; -webkit-transform: translateY(-22px); transform: translateY(-22px) } .payment-method__item.active::after, .payment-method__item:hover::after { right: -1px; border-right-color: #fff } .payment-method__logo { position: relative; display: inline-block } .loading .payment-method__logo { opacity: 0 } .payment-method__logo>img+img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .2s } .payment-method__item.active .payment-method__logo>img:first-child, .payment-method__item:hover .payment-method__logo>img:first-child { opacity: 0; transition-delay: .1s } .payment-method__label { display: block; padding: 10px 7px 0; color: #999; text-align: center; font-size: 13px; line-height: 1.357; transition: .2s color } .payment-method__item.active .payment-method__label, .payment-method__item:hover .payment-method__label { color: #6a6a6a } .payment-section, .payment-section-content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center } .payment-section { min-height: 590px; background: #fff; text-align: center; width: 790px } .payment-method+.payment-section { width: 680px } .payment-section-content { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 100%; padding: 20px 0 } .payment-section-content__action { margin: 10px 0 } .payment-section-title { display: block; margin: 0 0 20px; padding: 0 20px } .payment-section-footer:not(:empty) { margin: 0 30px; text-align: left } .payment-section__topup .checkbox-field, .payment-section__topup .checkbox-field__input:checked+.checkbox-field__label, .payment-section__topup .checkbox-field__label:hover { color: #6a6a6a } iframe.payment-form { display: block; overflow-x: hidden; overflow-y: auto; width: 100%; margin: 0 0 -10px; background: 0 0 } .sms-code-field { display: inline-block; margin: 0 0 20px; padding: 0 12px; border: 1px solid #b3deb3; border-radius: 4px; background: #e1f1e1 } .sms-code-field .digits, .sms-subscribe__code { position: relative; display: inline-block; margin: 9px 7px } .sms-code-field .marker { position: absolute; right: 0; bottom: -19px; left: 0; height: 3px; margin: 0 -2px; border: solid #c1c1c1; border-width: 0 1px 1px } .sms-code__code .mobile-operators { margin: 20px 0 0 } .sms-subscribe__code { margin: 10px 0; padding: 10px; border-radius: 5px; background: #333844; color: #fff; font-weight: 400; font-size: 2.286em; line-height: 1 } .mobile-operators>img { margin: 0 0 0 10px } .mobile-operators-extended__item { position: relative; min-width: 88px; height: 70px; padding: 14px 5px 12px; border: 2px solid rgba(0, 0, 0, .15); border-radius: 10px } .mobile-operators-extended__item+.mobile-operators-extended__item { margin: 0 0 0 15px } .mobile-operators-extended__item.active, .mobile-operators-extended__item:hover { border-color: #7000e3 } .mobile-operators-extended__icon { display: block; margin: 0 auto 5px } .mobile-operators-extended__name { color: #6a6a6a; white-space: nowrap } .frame_h_120 .payment-form { height: 120px!important } .frame_h_291 .payment-form { height: 291px } .frame_h_352 .payment-form { height: 352px } .frame_h_385 .payment-form { height: 385px } .frame_h_400 .payment-form { height: 400px } .frame_h_429 .payment-form { height: 429px } .frame_h_450 .payment-form { height: 450px } .frame_h_460 .payment-form { height: 460px } .frame_h_470 .payment-form { height: 470px } .frame_h_520 .payment-form { height: 520px } .frame_h_530 .payment-form { height: 530px } .frame_h_540 .payment-form { height: 540px } .frame_h_550 .payment-form { height: 550px } .frame_h_610 .payment-form { height: 610px } .frame_h_630 .payment-form { height: 630px } .frame_h_640 .payment-form { height: 640px } .frame_h_660 .payment-form { height: 660px } .frame_h_740 .payment-form { height: 740px } .adblock-possible { overflow: hidden } .adblock-possible.frame_h_610 { height: 620px } .adblock-info__ico { display: block; width: 160px; height: 160px; margin: 30px auto; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/blocker/gallery-blocker-hand.f1fe4aaab40b3e034021.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.25), only screen and (min-resolution:120dpi), only screen and (min-resolution:1.25dppx) { .adblock-info__ico { background-image: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/blocker/gallery-blocker-hand@2x.b978fb2171a3bfca2acc.png); background-size: 160px 160px } } .adblock-info__txt { margin: 30px 110px } .banco__item { display: inline-block; vertical-align: middle } .banco__block { position: relative; display: block; min-width: 145px; margin: 5px 8px; padding: 15px 5px; border: 2px solid rgba(0, 0, 0, .15); border-radius: 10px } .banco__block:hover { border-color: #7000e3 } .banco__logo { display: block; margin: 0 auto 10px } .highlight { color: #1ac636 } .payment-error .payment-section-footer { display: none } .boleto--new-form .form-field { width: 240px } .boleto--new-form .form-field+.form-field { margin-left: 30px } .wizard-section-extra { width: 270px; padding: 25px 20px 20px; border-left: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 14px; background: #f7f7f7 } .wizard--details .wizard-section-extra { border-radius: 0 } @media only screen and (max-width:1100px) { .wizard-section-extra { display: none } } .wizard-section-extra__header { margin: 0 0 10px } .advantages-list { margin: 25px 0 0 } .advantages-item { position: relative; margin: 0 0 16px; padding: 0 0 0 38px; list-style: none } .advantages-item__icon { float: left; margin: 0 0 0 -38px } .advantages-item__icon::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: '' } .advantages-item:not(:hover) .advantages-item__icon .icon { fill: #949494 } .advantages-item:not(:hover) .advantages-item__icon .icon--circle { background: #949494; fill: #f7f7f7 } .advantages-item__title { display: block; padding: 3px 0; transition: color .3s } .advantages-item__desc { overflow: hidden; max-height: 0; margin: 0; opacity: 0; font-weight: 300; transition: max-height .2s linear, opacity .1s linear .1s; cursor: default } .advantages-item:hover .advantages-item__title { color: #7000e3 } .advantages-item:hover .advantages-item__desc { max-height: 80px; opacity: 1 } .wizard-special-offer { margin: 0 0 25px; padding: 20px 22px; border: 1px solid #c9ced1; border-radius: 10px; background: #fff; text-align: center } .wizard-special-offer--light { padding: 0 20px 20px; border-width: 0 0 1px; border-color: rgba(0, 0, 0, .15); border-radius: 0; background: 0 0 } .wizard-special-offer p { margin-bottom: 7px } .wizard-special-offer__img { margin: 0 0 10px } .payment-packages { margin: 20px 0 } .payment-packages__inner { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; padding: 0 10px } .payment-packages__item { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; flex: 1 1 auto } .payment-packages__item::before { position: absolute; top: 50%; right: -1px; width: 1px; height: 90%; content: ''; background: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none } .payment-packages__item:last-child::before { content: none } .payment-packages__show-more { margin: 10px auto 0 } .payment-package, .payment-package__inner { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column } .payment-package { position: relative; -webkit-flex: 1 1 auto; flex: 1 1 auto; font-size: 14px } .payment-package::before { position: absolute; z-index: 1; top: 0; right: -2px; bottom: 0; left: 0; content: ''; border: 2px solid transparent; border-radius: 6px; pointer-events: none } .payment-package__inner { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 20px 0; pointer-events: none } .payment-package__promo { position: absolute; z-index: 2; top: 0; left: 50%; padding: 3px 10px 2px; border-radius: 10px; color: #fff; white-space: nowrap; font-size: 11px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .payment-package__media { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 80px; height: 80px; margin-bottom: 15px } .payment-package__image { display: block; -webkit-flex: 0 0 auto; flex: 0 0 auto; max-width: 100% } .payment-package__header { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center } .ie11 .payment-package__header { max-width: 100% } .payment-package__title { color: #303030; font-weight: 400; font-size: 14px } .payment-package__price { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-top: 10px; color: #949494; font-size: 14px } .payment-package__price-value--new:not(:only-child) { color: #35b122; font-weight: 400 } .payment-package__price-value--old:not(:only-child) { text-decoration: line-through } .payment-package__price-value+.payment-package__price-value { margin-top: 3px } .payment-package__benefits { margin-top: 5px; color: #35b122; font-size: 11px } .payment-package__checkbox { position: absolute; opacity: 0 } .payment-package--popular .payment-package__promo { background: #8400E9 } .payment-package--best .payment-package__promo { background: #13c42f } .payment-package.is-selected::before { border-color: #fdbe00; box-shadow: 0 4px 8px rgba(253, 190, 0, .3) } .payment-package.not-selected::before { border-color: #fefefe; box-shadow: 0 4px 8px rgba(221, 221, 221, .3) } .payment-promo { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 0 auto; flex: 1 0 auto; text-align: center } .payment-promo__header { position: relative; -webkit-flex: 0 0 auto; flex: 0 0 auto; text-align: center } .ie11 .payment-promo__content, .ie11 .payment-promo__header { max-width: 100% } .payment-promo__header--premium { height: 60px; background: #7000e3; color: #fff } .payment-promo__header-icon { display: -webkit-inline-flex; display: inline-flex } .payment-promo__header-icon--premium { margin-top: 35px } .payment-promo__content { -webkit-flex: 1 0 auto; flex: 1 0 auto; padding: 40px 0 } .payment-promo__content--credits { padding-top: 25px } .payment-promo__footer { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100% } .payment-promo__footer>.service-cost { padding-top: 0 } .payment-promo__actions { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center } .payment-promo__actions .btn { margin-top: 0; margin-bottom: 0 } .payment-promo__actions+.payment-promo__actions { margin-top: 30px } .payment-promo__actions+.payment-promo__title { margin-top: 25px } .payment-promo__actions-item+.payment-promo__actions-item { margin-left: 10px } .payment-promo__offers { padding: 0 40px } .payment-promo__offers+.payment-promo__bma { margin-top: 40px } .payment-promo__title { margin-bottom: 0 } .payment-promo__title+.payment-promo__features { margin-top: 30px } .payment-promo__features .payment-info { margin: 0 } .payment-promo__features+.payment-promo__actions, .payment-promo__features+.payment-promo__features { margin-top: 30px } .payment-promo--simple { max-width: 900px; margin: 0 auto } .payment-promo--simple .payment-promo__content { padding-top: 0; padding-bottom: 20px } .payment-info { margin: 45px 0 0 } .payment-info__item { position: relative; display: inline-block; vertical-align: top; width: 210px; min-height: 145px; margin: 0 30px } .payment-info__item:hover .link { border-color: #7000e3; color: #7000e3 } .payment-info__item .btn { position: static } .payment-info__ico { position: relative; width: 168px; height: 209px; margin: 0 auto 25px; background: url(/v2/-/-/js/hon_v3/assets/images/hotornot_v2/promo/payment/feature-photo-frames.11d86cdcdab34fba8969.png) no-repeat 0 0 } .payment-info__ico--top { background-position: -173px 0 } .payment-info__ico--bottom { background-position: -346px 0 } .payment-info__ico--favorite { background-position: -519px 0 } .payment-info__ico--bottom .payment-info__photo, .payment-info__ico--top .payment-info__photo { height: 165px } .payment-info__ico--top .payment-info__photo { top: 39px; border-radius: 0 0 5px 5px } .payment-info__ico--top .payment-info__photo::after { border-radius: 0 0 5px 5px } .payment-info__ico--bottom .payment-info__photo, .payment-info__ico--bottom .payment-info__photo::after { border-radius: 5px 5px 0 0 } .payment-info__ico>.icon { position: absolute; z-index: 1; right: 0; bottom: -10px; left: 0; margin: auto; border-radius: 100%; box-shadow: 0 0 0 2px #fff } .payment-info__photo { position: relative; top: 5px; display: inline-block; overflow: hidden; width: 154px; height: 199px; border-radius: 5px } .payment-info__photo::after { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; content: ''; border-radius: 5px; box-shadow: 0 0 0 1px rgba(52, 58, 69, .15) inset } .payment-info__photo>img { position: absolute; z-index: 1; top: -100px; right: -100px; bottom: -100px; left: -100px; margin: auto } .payment-info__hint { display: block; margin: 15px 0 0 } .payment-features { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin: 0 auto; text-align: center } .payment-features__item { width: 30% } .payment-features--minor { max-width: 840px } .nav-swipe { position: absolute; z-index: 10; top: 15px; left: 40%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 150px; height: 78px; } .button-circular { width: 68px; height: 68px; background: #FFF; border: none; -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 50% } .profilePhotoShadow{ -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.17); box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.17); } .upload { cursor: pointer; position: relative; } .upload .image { color: #B4B8C1; stroke: none; -webkit-transform: rotate(15deg); transform: rotate(15deg); } .upload .circle { display: block; stroke: #EDEEF1; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; width: 164px; height: 164px; opacity: 0; transition: all .2s ease; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .upload .circle .active { stroke: #67C38A; stroke-dasharray: 502.65; stroke-dashoffset: 502.65; transition: all 4s ease; } .upload:before { content: ''; border-radius: 12px; background: rgba(180, 184, 193, 0.3); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .upload .image, .upload:before { display: block; width: 52px; height: 52px; margin: -26px 0 0 -26px; left: 50%; top: 50%; position: absolute; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; transition: all 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15); } .upload:not(.do):hover .image { -webkit-transform: rotate(10deg); transform: rotate(10deg); color: #67C38A; } .upload:not(.do):hover:before { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); background: rgba(103, 195, 138, 0.3); } .upload.do .image { color: #67C38A; -webkit-transform: rotate(10deg); transform: rotate(10deg); -webkit-animation: bounce 1s infinite ease; animation: bounce 1s infinite ease; } .upload.do:before { background: rgba(103, 195, 138, 0.3); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-animation: bounceAlt 1s infinite ease; animation: bounceAlt 1s infinite ease; } .upload.do .circle { opacity: 1; } .upload.do .circle .active { stroke-dashoffset: 0; } .upload.animateEnd .image, .upload.animateEnd:before { -webkit-animation: none; animation: none; } .upload.animateEnd .image { -webkit-transform: rotate(10deg); transform: rotate(10deg); } .upload.animateEnd:before { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .upload.animateEnd .circle { opacity: 0; transition-delay: 0s; } .upload.animateEnd .circle .active { stroke-dasharray: 502.65; stroke-dashoffset: 502.65; } @-webkit-keyframes bounce { 50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @keyframes bounce { 50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @-webkit-keyframes bounceAlt { 50% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } } @keyframes bounceAlt { 50% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } } .dragBorder{ border-color:#67c38a !important; } .file-input { display: inline-block; text-align: left; background: none; padding: 16px; width: 450px; position: relative; border-radius: 3px; } .file-input > [type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 10; cursor: pointer; } .file-input > .button { display: inline-block; cursor: pointer; background: #eee; padding: 8px 16px; border-radius: 2px; margin-right: 8px; } .file-input:hover > .button { background: #5fbe83; color: white; } .file-input > .label { color: #333; white-space: nowrap; opacity: .3; } .file-input.-chosen > .label { opacity: 1; } .upload__files { display: flex; flex-flow: row wrap; margin: 10px 0 0; padding: 0; width: 100%; } .upload__files *:nth-child(3n) { margin-right: 0; } .preview { position: relative; background: none; padding: 10px 10px 5px; margin: 0 10px 10px 0; width: 140px; } .preview__thumb { background: #1b1c21; border-radius: 3px; height: 100px; flex: 0 0 100%; margin: 0 0 10px; display: flex; justify-content: center; align-items: center; } .preview__thumb img, .preview__thumb video { max-width: 100%; max-height: 98px; } .preview__name, .preview__type { display: inline-block; font-size: 0.8571rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .preview__name { font-weight: 700; } .file-upload-promo-wrapper:hover{ background: none !important; } .box-shadow{ -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.12); } .box-shadow-low{ -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07); } .text-shadow-banner{ text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15); } .box-shadow-left-profile{ -webkit-box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.22); box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.22); } .box-shadow-credits{ -webkit-box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.12); } .contentSwitch{ position: absolute; left: 0px; top: 0px; z-index: 2; width: 87%; margin-left: 10px; } .switch { height: 24px; display: block; position: relative; cursor: pointer; } .switch input { display: none; } .switch input + span { padding-left: 50px; min-height: 24px; line-height: 24px; display: block; color: #99A3BA; position: relative; vertical-align: middle; white-space: nowrap; transition: color .3s ease; } .switch input + span:before, .switch input + span:after { content: ''; display: block; position: absolute; border-radius: 12px; } .switch input + span:before { top: 0; left: 0; width: 42px; height: 24px; background: #E4ECFA; transition: all .3s ease; } .switch input + span:after { width: 18px; height: 18px; background: #fff; top: 3px; left: 3px; box-shadow: 0 1px 3px rgba(18, 22, 33, 0.1); transition: all .45s ease; } .switch input + span em { width: 8px; height: 7px; background: #99A3BA; position: absolute; left: 8px; bottom: 7px; border-radius: 2px; display: block; z-index: 1; transition: all .45s ease; } .switch input + span em:before { content: ''; width: 2px; height: 2px; border-radius: 1px; background: #fff; position: absolute; display: block; left: 50%; top: 50%; margin: -1px 0 0 -1px; } .switch input + span em:after { content: ''; display: block; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #99A3BA; border-bottom: 0; width: 6px; height: 4px; left: 1px; bottom: 6px; position: absolute; z-index: 1; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; transition: all .45s ease; -webkit-transform: rotate(-35deg) translate(0, 1px); transform: rotate(-35deg) translate(0, 1px); } .switch input + span strong { font-weight: normal; position: relative; display: block; top: 1px; } .switch input + span strong:before, .switch input + span strong:after { font-size: 14px; font-weight: 500; display: block; font-family: Arial; -webkit-backface-visibility: hidden; } .switch input + span strong:before { content: 'Public'; transition: all .3s ease .2s; } .switch input + span strong:after { content: 'Private'; opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; color: #5628EE; transition: all .3s ease; -webkit-transform: translate(2px, 0); transform: translate(2px, 0); } .switch input:checked + span:before { background: rgba(86, 40, 238, 0.35); } .switch input:checked + span:after { background: #fff; -webkit-transform: translate(18px, 0); transform: translate(18px, 0); } .switch input:checked + span em { -webkit-transform: translate(18px, 0); transform: translate(18px, 0); background: #5628EE; } .switch input:checked + span em:after { border-color: #5628EE; -webkit-transform: rotate(0deg) translate(0, 0); transform: rotate(0deg) translate(0, 0); } .switch input:checked + span strong:before { opacity: 0; visibility: hidden; transition: all .3s ease; -webkit-transform: translate(-2px, 0); transform: translate(-2px, 0); } .switch input:checked + span strong:after { opacity: 1; visibility: visible; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: all .3s ease .2s; } .progress{ background: #e4ecfa !important; } .determinate{ background: #5628EE !important; } .ovl { overflow-y: hidden !important; } .uploadingGray{ -webkit-filter: grayscale(100%) !important; /* Safari 6.0 - 9.0 */ filter: grayscale(100%) !important; } .slider { position: relative; overflow: hidden } .slider .arrow-holder { cursor: pointer } .slider .arrow-holder.left.black { background: -webkit-gradient(linear, right top, left top, from(transparent), to(#000)); background: -o-linear-gradient(right, transparent, #000); background: linear-gradient(270deg, transparent, #000) } .slider .arrow-holder.right.black { background: -webkit-gradient(linear, left top, right top, from(transparent), to(#000)); background: -o-linear-gradient(left, transparent, #000); background: linear-gradient(90deg, transparent, #000) } .slider .arrow-holder.left.alabaster { background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 98%, 0)), to(#f9f9f9)); background: -o-linear-gradient(right, hsla(0, 0%, 98%, 0), #f9f9f9); background: linear-gradient(270deg, hsla(0, 0%, 98%, 0), #f9f9f9); opacity: 1 } .slider .arrow-holder.left.alabaster:hover { background: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 98%, 0)), color-stop(50%, hsla(0, 0%, 98%, .7)), to(#f9f9f9)); background: -o-linear-gradient(right, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, .7) 50%, #f9f9f9); background: linear-gradient(270deg, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, .7) 50%, #f9f9f9) } .slider .arrow-holder.left.alabaster .arrow-icon { left: 30%; right: auto; background: url(/i/profile/gallery-arrow-left-black.png?1) 50% no-repeat } .slider .arrow-holder.right.alabaster { background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 98%, 0)), to(#f9f9f9)); background: -o-linear-gradient(left, hsla(0, 0%, 98%, 0), #f9f9f9); background: linear-gradient(90deg, hsla(0, 0%, 98%, 0), #f9f9f9); opacity: 1 } .slider .arrow-holder.right.alabaster:hover { background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 98%, 0)), color-stop(50%, hsla(0, 0%, 98%, .7)), to(#f9f9f9)); background: -o-linear-gradient(left, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, .7) 50%, #f9f9f9); background: linear-gradient(90deg, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, .7) 50%, #f9f9f9) } .slider .arrow-holder.right.alabaster .arrow-icon { right: 5%; left: auto; background: url(/i/profile/gallery-arrow-right-black.png?1) 50% no-repeat } @media (max-width:950px) { .slider .arrow-holder.left .arrow-icon { margin-left: -17px } .slider .arrow-holder.right .arrow-icon { margin-left: 5px } } .slider-content { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; display: inline-block; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; -o-transition: transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out; white-space: nowrap } .slider-content__element { display: inline-block } #fellow-to.live .stories-feed-layout, #fellow-to.search .stories-feed-layout { display: block } .stories-feed-layout { padding-top: 20px; position: relative } .stories-feed--hide { opacity: 0 } .story-progress { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100% } .story-progress .progress-unit { background-color: hsla(0, 0%, 100%, .35); height: 3px; margin: 0 2.5px; border-radius: 2px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto } .story-progress .progress-unit:first-child:not(:last-child) { margin-left: 0 } .story-progress .progress-unit:last-child:not(:first-child) { margin-right: 0 } .story-progress .progress-unit .progress-unit-fill { height: 100%; background-color: #fff; -webkit-transition: width .2s; -o-transition: width .2s; transition: width .2s } .story-preview:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; -webkit-animation: shineStory 1300ms linear infinite; animation: shineStory 1300ms linear infinite; } @-webkit-keyframes shineStory { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(200%); transform: translateX(200%); } } @keyframes shineStory { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(200%); transform: translateX(200%); } } .hs { height: 120px; overflow-x: scroll; } .hs:before, .hs:after { content: ''; width: 10px; } .spotlight-name-mark{ display: none !important; } .spotlight-name:hover .spotlight-name-mark{ display: block !important; } .discoverStoryPhoto{ background-size: cover !important; background-repeat: no-repeat !important; background-position: top center !important; } .beacon{width:12px; height:12px; background:red; border-radius:20px; position:relative;display: inline-table;margin-right: 5px} .ring{width:12px; height:12px; display:block; content:" "; border:3px solid red; box-sizing:border-box; border-radius:40px; animation: ring 1.5s infinite;} @keyframes ring { 0% { opacity: .3; } 100% { opacity: 0; transform:scale(2.5) } } .controlsNav { position: absolute; display: flex; flex-flow: row nowrap; right: 15px; top: 60px; z-index: 99; width: 80px; height: 20px; } .controlsNav > div { width: 17px; cursor: pointer; margin-left: 11.2px; transition: opacity 350ms ease; } .controlsNav > div.inactive { opacity: 0.2; } #preloader-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; /* change if the mask should have another color then white */ z-index: 9999 !important; /* makes sure it stays on top */ } #preloader { height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; } #preloader > .icon { position: absolute; top: 50%; left: 50%; border-radius: 50%; height: 36px; width: 36px; margin-top: -18px; margin-left: -18px; /*-webkit-animation: wink 1s ease-in-out infinite alternate; animation: wink 1s ease-in-out infinite alternate; */ } @media only screen and (min-width: 768px) { #preloader { height: 120px; width: 120px; margin-top: -60px; margin-left: -60px; } #preloader:before { left: -2px; top: -2px; border-top-width: 2px; border-left-width: 2px; border-bottom-width: 2px; border-right-width: 2px; } #preloader > .icon { height: 54px; width: 54px; margin-top: -26.5px; margin-left: -26.5px; } } @media only screen and (min-width: 1200px) { #preloader { height: 160px; width: 160px; margin-top: -80px; margin-left: -80px; } #preloader > .icon { height: 72px; width: 72px; margin-top: -36px; margin-left: -36px; } } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes rotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes wink { from { opacity: 0; } to { opacity: 1; } } @keyframes wink { from { opacity: 0; } to { opacity: 1; } } .sloader { left: 0; position: relative; right: 0; top: 0; z-index: 99; margin-top: 0px; } .backgroundAnimation { height: 3px; background: #27c4f5 -webkit-gradient(linear,left top, right top,from(#27c4f5),color-stop(#a307ba),color-stop(#fd8d32),color-stop(#70c050),to(#27c4f5)); background: #27c4f5 linear-gradient(to right,#27c4f5,#a307ba,#fd8d32,#70c050,#27c4f5); background-size: 500%; -webkit-animation: 2s linear infinite barprogress,.3s fadein; animation: 2s linear infinite barprogress,.3s fadein; width: 100%; } @-webkit-keyframes barprogress { 0% { background-position: 0% 0 } to { background-position: 125% 0 } } @keyframes barprogress { 0% { background-position: 0% 0 } to { background-position: 125% 0 } } @-webkit-keyframes fadein { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadein { 0% { opacity: 0 } to { opacity: 1 } } .dropdown-media { position: absolute; top: 5px; left: 3px; display: inline-block; text-align: left; width: 100%; z-index: 99; } .dropdown-text { cursor: pointer; position: absolute; text-indent: 10px; line-height: 32px; background-color: #eee; border: 1px solid #ccc; border-radius: 3px; width: 100%; } .dropdown-text:after { position: absolute; right: 6px; top: 15px; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 5px 4px 0 4px; border-color: #555 transparent transparent transparent; } .dropdown-text, .dropdown-content-media a { color: #333; font-family: 'Montserrat'; font-weight: 500; border-bottom: 1px solid #fafafa; font-size: 12px } .dropdown-toggle { font-size: 0; z-index: 1; cursor: pointer; position: absolute; top: 0; border: none; padding: 0; margin: 0 0 0 1px; background: transparent; text-indent: -10px; height: 100px; width: 100%; } .dropdown-toggle:focus { outline: 0; } .dropdown-content-media { -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; list-style-type: none; position: absolute; top: 0; padding: 0; margin: 0; opacity: 0; visibility:hidden; border-radius: 3px; text-indent: 10px; line-height: 32px; background: rgba(255,255,255,.85); border: 1px solid #fafafa; width: 140px; height: 140px; z-index: 999; } .dropdown-content-media a { display: block; } .dropdown-content-media a:hover { background: #fff; } .dropdown-toggle:hover ~ .dropdown-text, .dropdown-toggle:focus ~ .dropdown-text { background-color: #e8e8e8; } .dropdown-toggle:focus ~ .dropdown-text { z-index: 2; } .dropdown-toggle:focus ~ .dropdown-text:after { border-width: 0 4px 5px 4px; border-color: transparent transparent #555 transparent; } .dropdown-content-media:hover, .dropdown-toggle:focus ~ .dropdown-content-media { opacity: 1; visibility:visible; top: 0; } .promo-image { position: absolute; bottom: 2px; right: 0; } .promo-image img { display: block; position: absolute; bottom: -115px; left: -430px; } .promo-image .promo-gift { width: 100px; height: 100px; position: absolute; left: 25%; bottom: 77px; animation-name: promo-gift-wiggle; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: forwards; } .promo-image .promo-gift img, .promo-image .promo-gift div { position: absolute; } .promo-image .promo-gift-wrapper { transition: all 0.15s ease; position: absolute; bottom: -120px; left: -280px; } .promo-image .promo-gift-box { bottom: 0; left: 2px; } .promo-image .promo-gift-top { width: 100px; bottom: 52px; left: 0; animation-name: promo-gift-top-wiggle; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: forwards; } .promo-image .promo-gift-lid { bottom: 0; left: 0; } .promo-image .promo-gift-ribbon { bottom: 12px; left: 42px; transform-origin: 50% 100%; transition: all 0.25s ease; } .promo-image .promo-gift-ribbon.ribbon-1 { animation-name: promo-gift-ribbon-1-wiggle; animation-duration: 1.25s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: forwards; } .promo-image .promo-gift-ribbon.ribbon-2 { animation-name: promo-gift-ribbon-2-wiggle; animation-duration: 1.25s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: forwards; } @keyframes promo-gift-top-wiggle { 0% { transform: rotate(0deg); transform-origin: 100% 100%; } 10% { transform: rotate(5deg); } 14% { transform-origin: 100% 100%; transform: rotate(0deg); } 50% { transform-origin: 0% 100%; transform: rotate(0deg); } 60% { transform: rotate(-5deg); } 64% { transform-origin: 0% 100%; transform: rotate(0deg); } 100% { transform-origin: 100% 100%; transform: rotate(0deg); } } @keyframes promo-gift-wiggle { 0% { transform: rotate(0deg) scaleX(1); transform-origin: 100% 100%; } 8% { transform: rotate(2deg) scaleX(0.99); } 12% { transform: rotate(0deg) scaleX(1); } 16% { transform: rotate(1deg) scaleX(1); } 20% { transform: rotate(0deg) scaleX(1); transform-origin: 100% 100%; } 50% { transform: rotate(0deg) scaleX(1); transform-origin: 0% 100%; } 58% { transform: rotate(-2deg) scaleX(0.99); } 62% { transform: rotate(0deg) scaleX(1); } 66% { transform: rotate(-1deg) scaleX(1); } 70% { transform: rotate(0deg) scaleX(1); transform-origin: 0% 100%; } 100% { transform: rotate(0deg) scaleX(1); transform-origin: 100% 100%; } } @keyframes promo-gift-ribbon-1-wiggle { 0% { transform: rotate(45deg); } 6% { transform: rotate(40deg); } 22% { transform: rotate(65deg); } 38% { transform: rotate(30deg); } 44% { transform: rotate(45deg); } 100% { transform: rotate(45deg); } } @keyframes promo-gift-ribbon-2-wiggle { 0% { transform: rotate(-45deg); } 6% { transform: rotate(-40deg); } 22% { transform: rotate(-65deg); } 38% { transform: rotate(-30deg); } 44% { transform: rotate(-45deg); } 100% { transform: rotate(-45deg); } } @keyframes promo-gift-floating { 0% { transform: rotate(-1deg); transform-origin: 50% 100%; } 50% { transform: rotate(1deg); transform-origin: 50% 100%; } 100% { transform: rotate(-1deg); transform-origin: 50% 100%; } } @keyframes promo-gift-top-floating { 0% { transform: rotate(-3deg) translateY(-10px); transform-origin: 50% 100%; } 50% { transform: rotate(3deg) translateY(-10px); transform-origin: 50% 100%; } 100% { transform: rotate(-3deg) translateY(-10px); transform-origin: 50% 100%; } } @keyframes promo-gift-mini-rotate { 100% { background-position: -504px; } } @keyframes confirmation-icon-hue-cycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } figure.snip1205 { overflow: hidden; text-align: center; margin:0; } figure.snip1205 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } figure.snip1205 i { position: absolute; top: 50%; left: 50%; border-radius: 50%; font-size: 24px; color: #000000; width: 40px; height: 40px; line-height: 40px !important; text-align: center; padding-top: 7px; padding-left: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045); cursor: pointer; } figure.snip1205 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; } figure.snip1205:hover img, figure.snip1205.hover img { opacity: 0.3; } figure.snip1205:hover i, figure.snip1205.hover i { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .gifImages { position: absolute; bottom: 85px; left: 0px; height: 260px; width: 89%; background: #fff; display: none; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: 100px; z-index: 99; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #eee; padding: 10px; } .gifFilterSearch{ position: absolute; bottom: 340px; left: 0px; width: 89%; padding: 10px; height: 70px; z-index: 100; } .gifFilterSearch input{ opacity: 0.6 !important; } .gifFilterSearch input:hover{ opacity: 1 !important; } .gifFilterSearch input:focus{ opacity: 1 !important; } .gifImages img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .gifImages figure { height: 100%; width: 100%; } .showEmoji{ position: absolute; bottom: 105px; left: 1%; height: 370px; width: 87%; background: #fff; z-index: 99; } #chat-message{ white-space: nowrap; overflow-y: hidden; width: 90%; } #chat-message::-webkit-scrollbar { display: none; } .lw-btn .wave { animation-name: wave-animation; animation-duration: 2.5s; animation-iteration-count: infinite; transform-origin: 70% 70%; display: inline-block; } @keyframes wave-animation { 0% { transform: rotate( 0.0deg) } 10% { transform: rotate(-10.0deg) } 20% { transform: rotate( 12.0deg) } 30% { transform: rotate(-10.0deg) } 40% { transform: rotate( 9.0deg) } 50% { transform: rotate( 0.0deg) } 100% { transform: rotate( 0.0deg) } } .notificationBubble{ font: normal normal normal 14px/26px "Montserrat", sans-serif; position: absolute; top: 22px; right: 10px; margin: auto; width: 26px; height: 26px; text-align: center; background: none; border-radius: 25px; font-weight: bold; color: #333; transition: background .4s ease; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .notificationBubble:hover { cursor: pointer; } @media only screen and (max-width: 1280px) { .profile-menu-interactions ul li{ margin-left: 5px; margin-right: 5px; } } .hint {} .hint:before, .hint:after { position: absolute; opacity: 0; z-index: 1000000 !important; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; pointer-events: none; } .hint:hover:before, .hint:hover:after { opacity: 1; } .hint:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; position: absolute; } .hint:after { content: attr(data-hint); padding: 8px 10px; font-size: 12px; white-space: nowrap; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } /* top */ .hint--top:before { bottom: 100%; left: 50%; margin: 0 0 -18px 0; border-top-color: rgba(0, 0, 0, 0.8); } .hint--top:after { bottom: 100%; left: 50%; margin: 0 0 -6px -10px; } .hint--top:hover:before { margin-bottom: -10px; } .hint--top:hover:after { margin-bottom: 2px; } /* default: bottom */ .hint--bottom:before { top: 100%; left: 50%; margin: -14px 0 0 0; border-bottom-color: rgba(0, 0, 0, 0.8); } .hint--bottom:after { top: 100%; left: 50%; margin: -2px 0 0 -10px; } .hint--bottom:hover:before { margin-top: -6px; } .hint--bottom:hover:after { margin-top: 6px; } /* right */ .hint--right:before { left: 100%; bottom: 50%; margin: 0 0 -4px -8px; border-right-color: rgba(0,0,0,0.8); } .hint--right:after { left: 100%; bottom: 50%; margin: 0 0 -13px 4px; } .hint--right:hover:before { margin: 0 0 -4px -0; } .hint--right:hover:after { margin: 0 0 -13px 12px; } /* left */ .hint--left:before { } .hint--left:after { } .hint--left:hover:before { } .hint--left:hover:after { background: rgba(0, 0, 0, 0.8) !important; color: #000 !important; } ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #e1e1e1; border: 13px none #ebebeb; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: #e5e5e5; } ::-webkit-scrollbar-thumb:active { background: #c4c4c4; } ::-webkit-scrollbar-track { background: #ffffff; border: 16px none #b9b9b9; border-radius: 56px; } ::-webkit-scrollbar-track:hover { background: #ffffff; } ::-webkit-scrollbar-track:active { background: #ffffff; } ::-webkit-scrollbar-corner { background: transparent; } .absoluteCenter { margin-left: -300px!important; } @media only screen and (min-width: 1440px) { .absoluteCenter { } } @media only screen and (min-width: 1680px) { .absoluteCenter { } } .popularity-line{ border:none !important; } .popularity-line:before{ border:none !important; } .icon__svg{ pointer-events: none !important; width: auto!important; height: auto!important; }