html, body { height: 100%; } #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;} body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 0px; padding-bottom: 0px; background-color:#DFE7EF; } /* heading */ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} /* spaces */ .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } .h-100{height: 100%;} .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; background-size: 45%;} /* navbar */ .spotLight-nav{ padding-top: 20px;} .spotLight-nav li a{font-family: 'Montserrat', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 22px; letter-spacing: -0.7470597624778748px; text-align: left; color:#000; opacity: 0.6; } .spotLight-nav li {margin-right: 14px;} .spotLight-nav li.active a{font-weight: 600; opacity: 1;} .spotLight-nav li.spotLight-img a{opacity: 1;} .navbar-brand{ margin-right: 57px;} /* ul list style */ .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; font-size: 20px; font-style: normal; font-weight: 500; line-height: 24px; float: left; margin-top: 24px; } .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} .sign-in-up-list li span{ float: left;} /* form */ .form-layout{ width: 100%; display: block; float: left;} .form-layout form{ display:block; float: left; width: 100%;} .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} .form-layout .social-login{ display: block; width: 339px; margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} .form-layout .social-login ul li:nth-child(2){margin:0 37px;} .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; font-family: 'Montserrat', sans-serif; font-size: 13px; font-style: normal; font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} form input:focus{ box-shadow:0px !important; outline: 0px !important;} /* placeholder */ form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ line-height: 18px; color: #000000; opacity: 0.5; font-family: 'Montserrat', sans-serif; font-size: 13px; font-style: normal; font-weight: 600; } form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ line-height: 18px; color: #000000; opacity: 0.5; font-family: 'Montserrat', sans-serif; font-size: 13px; font-style: normal; font-weight: 600; } form input::-ms-input-placeholder { /* Microsoft Edge */ line-height: 18px; color: #000000; opacity: 0.5; font-family: 'Montserrat', sans-serif; font-size: 13px; font-style: normal; font-weight: 600; } /* placeholder */ .sb-button{ background: #514DA7; height: 50px; line-height: 35px; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 13px; font-style: normal; font-weight: 600; width: 100%;} .sb-button img{ margin-right: 10px; width: 20px;} .sb-button:hover{ color:#fff;} .form-layout p{margin-top:17px ;} .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 700;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; } .form-layout p a:hover{ color:#000;} .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} .welcome-hd-back{ font-family: 'Bebas Neue', cursive; font-style: normal; font-weight: 600; font-size: 106px; line-height: 106px; color: #000000; } .form-layout .go-back span{ font-weight: 500 !important;} .reset-pass-spc{ margin-top: 110px;} /* profile */ .inner-wrp { height: 100%; padding-left: 88px; padding-right: 37px; background:#fff;; font-family: 'Montserrat', sans-serif; } .user-profile-photo{width: 32px; height: 32px;} .user-profile-photo a, img{ width: 100%;} .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;} .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} .user-profile{ display: block; float: left; margin-left:30px; position: relative; width: 760px;} .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} .talk-to-me ul li{ display: block; float: left;margin-right:3px;} .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } .joined-info li a{ color:#000; opacity: 0.5;} .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} .joined-info li{ float: left;} /* list style */ .list-style-group{ width: 100%; display: block; float: left;} .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} .list-style{list-style-type: none; margin:0px; padding: 0px;} .list-style li{ float: left;} .list-style li a{ display: block; float: left;} .list-style li a img{ width: 48px; display: block; float: left; } .list-spc-top{ margin-top:15px ;} /* social connects */ .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} .social-connects li{ float: left; margin-right:0px ;} .social-connects li a{ display: block; float: left; padding: 11px;} .social-connects li a img.twitter{ margin-top:3px;} .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} .social-connects li a img{ width: 19px; display: block; float: left;} .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; float: left;} .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} /* profile tab */ .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} .top-brd{border-top: 1px solid #DFE7EF;} .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} .profile-tab li.active{ border-bottom: 4px solid #ef484f;} .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } /* profile data wrp */ .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;} .card-warpper{ width: 283px; background: #fff; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} .company-detail{ width: 100%; display: block; float: left; position: relative; margin-top: -63px; margin-bottom: 21px;} .company-detail .c-logo{ width: 82px; display: block; float: left;} .company-detail .c-logo img{ width: 100%;} .company-detail .c-tag img{ width: 100%;} .company-detail .c-tag { width: 89px; display: block; float: right;} .card-warpper h1{width: 198px; padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} .card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;} .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;} .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} /* colors */ .cape-honey{ background: #fde2a3;} .rose-bud{ background: #fba29a;} .pattens-blue{ background: #ceeced;} /* add new card */ .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} .add-card-warpper a{ display: block; width: 86px; margin: 0 auto; margin-top: 92px;} /* New Profile Buttons */ .profile-buttons{ width: 261px; display: block; margin:0 auto;} /* button sm */ .profile-sm-bt{ width: 180px; height: 54px; border-radius: 5px; border: 1px solid #514DA7; color: #514DA7; font-size: 16px; font-weight: 500; display: block; line-height: 55px; text-align: center;} .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} /* button md */ .profile-md-bt{ width:233px; height: 54px; border-radius: 5px; border: 1px solid #514DA7; color: #514DA7; font-size: 16px; font-weight: 500; display: block; line-height: 55px; text-align: center;} .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} /* button lg */ .profile-lg-bt{ width:261px; height: 54px; border-radius: 5px; border: 1px solid #514DA7; color: #514DA7; font-size: 16px; font-weight: 500; display: block; line-height: 55px; text-align: center;} .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} .center-and-spc{ margin:0 auto; margin-bottom:15px;} .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} /* Replies */ .replies{ display: block; float: left;} .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; color:#000; opacity: 0.5;} .comment-spc{ margin-left:9px ;} .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} /* team */ .verified-team{ width: 129px; display: inline-table; margin-top: 7px; position: absolute; margin-left: 10px;} .verified-team img{ width: 100%; display: block; float: left;} .active-company{ border-bottom: 4px solid #ef484f;} .active-company a{ font-weight: 700 !important;} .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} .c-social li a img{ width: auto !important;} .company-footer{ width: 100%; display: block; float: left;} .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} .company-footer ul li{float: left; margin-right: 10px;} .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} .company-footer .next{float: right; margin-top: -25px; margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} .company-footer .next img{ width: 25px; margin-top: 17px; margin-left: 16px;} .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; border-radius: 4px; padding: 23px; } /* members */ .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} .members-wrp .member-list a{ display: block; float: left; width: 100%;} .members-wrp .member-list a img{ width: 20%;display:block; float: left;} .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; margin-left: 8px !important; margin-top: 6px; border-radius: 5px;} /* popup */ .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ filter: blur(8px); -webkit-filter: blur(8px);} .popup-set{ width: 530px; background-color: #fff; border-radius: 0 40px 40px 40px; padding: 30px; position: relative; margin: 0 auto; margin-top: 80px;} .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} .popup-header img{ width: 109px; display: block; float: left;} .popup-header ul{ display: block; list-style-type: none; margin: 0px; padding: 0px; margin-top: 75px; margin-left: 20px; float: left;} .popup-header ul li{ float: left; margin-right: 31px;} .popup-header ul li a img{ width: 22px !important; float: left; display: block;} .popup-header ul li a{color:#514DA7;} .popup-header ul li a span{ display: block; float: left; margin-left: 10px; width: 50px; font-size: 14px; line-height: 17px; margin-top: -10px;} .popup-body{ width: 100%; display: block; float: left;} .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} .popup-forms .floating-label label{font-size: 11px; line-height: 19px; font-size: 16px; font-weight: 400; color: #000; position: absolute; margin: 0px 10px 0 10px; background: #fff; padding: 0 3px; position: absolute; pointer-events: none; top: 15px; opacity: 0.5; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} .popup-forms .floating-input input:focus{ outline: none;} .popup-forms .floating-label input:focus~label{ top: -11px; color: #514DA7; font-size: 14px;background:#fff; opacity:1; } .popup-forms .floating-label input:not(:placeholder-shown)~label { position: absolute; top: -11px; background:#fff; font-size: 14px; color: #514DA7;opacity:1; } /* textarea */ .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} .popup-forms .floating-input textarea:focus{ outline: none;} .popup-forms .floating-label textarea:focus~label{ top: -11px; color: #514DA7; font-size: 14px;background:#fff; opacity:1; } .popup-forms .floating-label textarea:not(:placeholder-shown)~label { position: absolute; top: -11px; background:#fff; font-size: 14px; color: #514DA7;opacity:1; } .popup-forms .form-group{ margin-bottom: 20px;} .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } .interests li{ float: left; margin-right: 10px;} .interests li span{ height: 40px; padding: 0 10px; line-height: 40px;background: #DFE7EF; display: block; float: left; border-radius: 5px;} .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; border-radius: 5px; background-color: #fff !important; width: 125px;} .interests li a{ width: 20px; display: block; float: right; margin: 6px 0px 0 114px; position: absolute;} /* color codes */ .silver{background-color: #C4C4C4;} .milk-punch{background-color: #FFF6D7;} .french-pass{background-color: #BDDBFF;} .cyan-french-pass{background-color: #C0FAFE;} .cosmos{background-color: #FFDBDC;} .cape-Honey{background-color: #FEE6AC;} .snuff{background-color: #E5DFF0;} .catskillWhite{background-color: #DFE7EF;} .white{background-color: #fff;} /* color codes */ .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} .colors li{ display: block; float: left; margin-right: 14px;} .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} .colors li a.active{border: 2px solid #514DA7;} .popup-forms .next-bt{ width: 99px; height: 54px; background: #514DA7; display: block; text-align: center; border-radius: 5px; color: #fff; font-size: 16px; line-height: 54px; font-weight: 600; position: absolute; right: 50px; bottom: -80px;} .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px;} .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; display: block; width: 270px; float: right; margin-top: 10px;} .select-arrow{ display: block; float: right; position: absolute; top: 13px; right: 17px; background: #fff; width: 31px; height: 17px;} .select-arrow img{width: 15px;} .popup-forms .save-bt{ width: 150px; height: 54px; background: #514DA7; display: block; text-align: center; border-radius: 5px; color: #fff; font-size: 16px; line-height: 54px; font-weight: 600; position: absolute; right: 50px; bottom: -80px;} /* insights */ .insights-wrp{ background-image: url(../images/insights-bg.svg); background-color: #DFE7EF; height: 100%; background-repeat: no-repeat; background-position: top center; background-size: contain; padding: 0 50px 0 100px;} .insights-profile{width: 32px; height: 32px; float: right; display: block; position: absolute; right: 0;} .insights-searh a{ width: 21px; height: 25px; display: block; position: absolute; right: 44px; top: 23px;} .insights-searh a img{ width: 100%;} .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} /* insights 2 */ .back-to-lib{ font-size: 12px; line-height: 14px; color: #000000; font-weight: 500; display: block; float: left;} .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} .insights-list li{ display: block; float: left;} .insights-list li a{ display: block; float: left; margin: 0px; padding: 5px 14px; background: #70A853; font-size: 15px;text-transform:uppercase; font-weight: 700; font-style: normal; color: #fff; border-radius: 50px;} .insights-details{ width: 850px;display:block; float: left;} .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} .features-group-list li a:hover{ text-decoration: none;} .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} .features-group-list li a img{ width: 9px; } .insights-rply img{ width: 14px;} .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} .insights-rply:hover{color: #70A853;} .active-green{border-bottom: 4px solid #70A853;} .insights-spc{padding: 0 100px;}