@charset "UTF-8"; /*custom font*/ @import url(https://fonts.googleapis.com/css?family=Montserrat); @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); /*basic reset*/ * { margin: 0; padding: 0; } html { min-height: 100%; height: auto; /*Image only BG fallback*/ /*background = gradient + image pattern combo*/ /* background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */ } body { font-family: "Montserrat", sans-serif; background-color: white; font-size: 1.05rem; } .loading { width: 100%; height: 100%; opacity: 0.8; background-color: white; z-index: 10000; display: block; position: fixed; top: 0; left: 0; background-color: rgba(225, 225, 225, 0.8); background-image: url("../img/Cube-0.9s-197px.gif"); background-repeat: no-repeat; background-position: 50% 50%; } .ml { margin-left: 10px; } .mr { margin-right: 10px; } .mb { margin-bottom: 12px; } .top { margin-top: 20px; position: -webkit-sticky; position: sticky; top: 0; left: 50%; z-index: 20; background-color: inherit; } .copy { cursor: pointer; } .navbar { background-color: white; } @media screen and (min-width: 1025px) { .navbar .menu-bar { display: none; } } @media screen and (max-width: 767px) { .navbar-des { display: none; } } /* .imf { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; } */ .img_banner { background-image: url("images/banner_top1.jpg"); background-repeat: no-repeat; background-size: contain; background-position: center; width: 100%; height: 65px; } /*form styles*/ .img_logo { display: inline-block; margin: 0 auto; margin-bottom: 10px; } .title__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0px auto; } .sub-logo { display: inline-block; font-weight: 700; font-size: 1.4rem; color: white; } .slogan { display: block; font-weight: 700; font-size: 1.2rem; color: white; } .notice_card { -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; margin: 0 10%; margin-bottom: 1.5rem; background: white; border: 0 none; border-radius: 3px; -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 10px 20px; line-height: 1.5rem; } #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 10%; height: 30px; background-color: #1c7ce0; text-align: center; line-height: 30px; color: white; } .go_title { color: white; font-family: "Montserrat", sans-serif; padding: 1rem; } .nav-list { color: white; margin-top: 1.5rem; } .nav-list-item { font-size: 1.2rem; cursor: pointer; position: relative; } .nav-list-item::after { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-bottom: 1px solid white; opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; } .nav-list-item:hover::after { opacity: 1; } .loader { position: absolute; top: 30%; left: 45%; } .imgfr { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; margin: 1rem auto 0 auto; cursor: pointer; } .card-title { font-family: "Montserrat", sans-serif; font-size: 1rem; } .strong { font-weight: 600; } .card { border: none; position: relative; } .card.active { border: 1px solid gray; } .card.active::before { position: absolute; content: "✓"; bottom: 0; right: 5px; } .zoomin { display: none; position: absolute; bottom: 0; left: 0; } .script_err { display: none; } /* .history-modal { height: 80vh; } .history-modal .modal-content{ height: 80vh; } .history-modal .modal-conten .modal-terms { height: 90%; overflow: scroll; } */ .input-sec { box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); } .input-sec .remove-btn { position: absolute; right: .2rem; bottom: .2rem; font-size: .8rem; padding: .2rem; background-color: #cacaca; } .upload-cta.box-active { height: 80px; width: 80px; background-size: cover !important; background-repeat: no-repeat; border-radius: 1rem; } .history { height: 75vh; overflow: scroll; } .historyList-item { padding: 1rem; display: block; width: 80%; margin: 1rem auto; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0.9rem; -webkit-box-shadow: 1px 1px 4px 1px #cfcfcf; box-shadow: 1px 1px 4px 1px #cfcfcf; background-color: white; } .historyList-link { text-decoration: none; color: #494949; } .historyList-link:hover { color: #7c7c7c; } .listimg__fr { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: auto 0.5rem; } .listimg__fr img { width: 100%; height: 100%; } .content { width: calc(100% - 250px); } /*form styles*/ #msform { max-width: 1000px; min-width: 370px; margin: 50px auto; margin-bottom: 20px; text-align: center; position: relative; } #msform fieldset { background: white; border: 0 none; border-radius: 3px; -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; margin: 3rem 10%; /*stacking fieldsets above each other*/ position: relative; } @media screen and (max-width: 767px) { #msform fieldset { width: 90%; margin: 3rem auto; padding: 10px 15px; } } /*Hide all except first fieldset*/ /*inputs*/ #msform input[type="text"], #msform textarea, #msform input[type="email"] { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 16px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: montserrat; color: #2c3e50; font-size: 14px; } #msform input[type="text"], #msform textarea, #msform input[type="email"] { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 16px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: montserrat; color: #2c3e50; font-size: 14px; } #msform .img-inputTest input[type="text"], #msform .img-inputTest textarea, #msform .img-inputTest input[type="email"] { width: 80%; } /*buttons*/ #msform .action-button { width: 100px; background: #1c7ce0; font-weight: bold; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px auto; display: block; } #msform .action-button:hover, #msform .action-button:focus { -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; } #msform .next[disabled] { background-color: grey; } #msform .sender[disabled] { background-color: grey; } .draft-btn { padding: 10px 5px; background-color: #d1d1d1; display: inline-block; position: absolute; left: 1rem; bottom: 1rem; font-size: 1rem; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } .draft-btn:hover { background-color: #aaaaaa; } /*headings*/ .fs-title { font-size: 15px; text-transform: uppercase; color: #2c3e50; margin-bottom: 10px; } .fs-subtitle { display: inline-block; font-weight: normal; font-size: 18px; color: #666; margin-bottom: 20px; padding-bottom: 3px; border-bottom: 2px solid #1c7ce0; margin-left: 2rem; margin-right: 2rem; } .fs-label { display: block; text-align: left; margin-bottom: 8px; } .fs-label > i { margin-right: 3px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: black; text-transform: uppercase; font-size: 12px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 12px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ #progressbar li:after { content: ""; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after { background: #27ae60; color: white; } p.error-text { bottom: -23px; left: 24px; color: rgba(255, 0, 0, 0.7); font-size: 0.8em; margin-bottom: 0; } #term-error { color: rgba(255, 0, 0, 0.7); font-size: 0.8em; bottom: -23px; left: 24px; } select { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: montserrat; color: #2c3e50; font-size: 13px; background-color: transparent; } .pl-0 { padding-left: 0; } .terms { font-size: 0.9rem; width: 95%; min-width: 250px; height: auto; overflow: scroll; margin-bottom: 1rem; margin-left: auto; margin-right: auto; border: 1px solid #a3a3a3; line-height: 1.5rem; } .term-link a { text-decoration: none; color: black; } .h2 { text-align: center; font-size: 1.2rem; font-weight: 500; margin-top: 2rem; } .left_align { font-size: 18px; text-align: left; } #overlay { position: fixed; /* Sit on top of the page content */ display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; cursor: pointer; } .thankyou { margin: auto; min-width: 350px; height: 250px; margin-top: 190px; background: #fff; padding: 15px 20px; line-height: 25px; border-radius: 4px; text-align: center; } .thankyou input { margin-top: 40px; } .thankyou h3 { font-size: 2rem; font-weight: 700; color: #21ba45; line-height: 2.5rem; margin-bottom: 1.5rem; } .check_button { display: none; } .fs-label-type { background: transparent; padding: 5px; border: 1px solid black; border-radius: 5px; display: inline-block; } .check_button:checked + .fs-label-type { background-color: #27ae60; color: white; padding: 5px; border: 1px solid #27ae60; border-radius: 5px; } #checker1, #checker2 { display: inline; } .fs-label-info { background: transparent; padding: 5px; border: 1px solid black; border-radius: 5px; display: inline-block; margin-bottom: 8px; } input[type="radio"] { display: none; } input[type="radio"]:checked + .fs-label-info { background-color: #27ae60; color: white; padding: 5px; border: 1px solid #27ae60; border-radius: 5px; } input[type="checkbox"]:checked + .fs-label-info { background-color: #27ae60; color: white; padding: 5px; border: 1px solid #27ae60; border-radius: 5px; } .btn-exit { padding: 0.5rem 0.75rem; background-color: transparent; border: 1px solid black; margin-top: 0.3rem; } .btn-term-exit { padding: 0.5rem 0.75rem; background-color: transparent; border: 1px solid black; margin-top: 0.3rem; display: block; margin-left: auto; margin-right: auto; margin-bottom: 2rem; } footer { padding: 2rem; padding-top: 0.5rem; } .footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .img_fr { width: 80%; max-width: 850px; min-width: 300px; height: 60px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .img_fr img { width: 100%; height: 90%; } #msform #userid, #msform #area { height: 0; padding: 0; margin: 0; border: none; } #msform input[type="text"].error { border-color: red; } .modal-header { border-bottom: none; } .btn-dismiss { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); font-weight: bold; color: white; border: 0 none; border-radius: 20px; cursor: pointer; padding: 10px 35px; margin: 10px auto; display: block; } #avatarmega .modal-content { background-color: transparent; border: none; } #avatarmega .modal-title { color: white; } #avatarmega .modal-header { position: absolute; top: -0.5rem; right: 1.5rem; } .linker__box { padding: 0.5rem 1rem; border-radius: 1rem; -webkit-box-shadow: 1px 1px 5px 1px #c9c9c9; box-shadow: 1px 1px 5px 1px #c9c9c9; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 auto; display: none; } .linker__box p { margin-bottom: 0; color: gray; } .linker__box i { color: gray; position: relative; } .linker__box i::after { position: absolute; content: " "; right: -5px; top: -10%; border-right: 2px solid #a3a3a3; width: 1px; height: 120%; } .item_imgfr { width: 15%; height: 50px; border-radius: 50%; overflow: hidden; margin: auto 0.5rem; } .item_imgfr img { height: 100%; width: 100%; } .content-box { width: 75%; } .box-title { margin-bottom: 0.2rem; cursor: pointer; } .box-title:hover { color: grey; text-decoration: underline; } .box-link { cursor: pointer; } .img_uploader { display: none; } #msform input[type="text"].imgsrc { width: 80%; } .upload-btn { display: inline-block; width: 6rem; background-color: #75a7dd; color: white; padding: 0.4rem 0.5rem; font-size: 0.9rem; border-radius: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } #msform .input-sec { position: relative; } #msform .img-inputTest .upload-btn { display: inline-block; position: absolute; left: 0; top: 0; width: 20%; height: 100%; background-color: #75a7dd; background-position: center; background-size: cover; background-image: url(../img/upload_img.png); color: white; padding: 0.4rem 0.5rem; font-size: 0.9rem; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; border-radius: 0; } .upload-btn img { width: 30px; height: 30px; } .upload-btn:hover { background-color: #3b86d6; } .add, .add-subline, .addimg, .addsec { cursor: pointer; display: inline-block; width: 2rem; height: 2rem; background-color: #67abf3; font-size: 1.2rem; color: white; border-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .add:hover, .add-subline:hover, .addimg:hover, .addsec:hover { background-color: #398ee9; } body { font-family: "Lato", sans-serif; } .avatar-checkbox { display: none; } #mySidenav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #f5f5f5; } #mySidenav::-webkit-scrollbar { width: 12px; background-color: #f5f5f5; display: none; } #mySidenav::-webkit-scrollbar:hover { display: block; } #mySidenav::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #aaa; } .sidenav a { text-decoration: none; font-size: 25px; color: #818181; display: block; -webkit-transition: 0.3s; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-width: 576px) { #msform input[type="text"].imgsrc, #msform input[type="text"].txtsrc, #msform input[type="text"].subsrc { width: 100%; } #msform .input-sec > input[type="text"]:nth-of-type(1) { margin-top: 77%; } #msform .input_eng .input-sec > input[type="text"]:nth-of-type(1) { margin-top: 80%; } #msform .input-sec .upload-btn { width: 100%; height: 60%; } #msform .input_eng .input-sec .upload-btn { height: 45%; } } .container-login { width: 100vw; height: 100vh; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 7rem; padding: 0rem; } .navbar-nav button { background: white; border: none; outline: none; } .img-wave { position: fixed; bottom: 0; left: 0; height: 100%; z-index: -1; } .img-wave-profile { height: 80%; } .row-img { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7))); background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7)); background-size: cover; background-position: center; overflow: hidden; } .row-img .video { height: 100%; z-index: -1; position: absolute; left: -10%; top: 0; } .row-img .row-img-box { color: white; } .row-img .row-img-txt { position: absolute; bottom: 2rem; color: white; left: 2rem; font-size: 1.3rem; } .row-login { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; position: relative; } @media screen and (max-width: 767px) { .row-login { -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin-top: 50px; } } .row-login .title { position: relative; color: #052859; } .row-login .title::after { position: absolute; content: ""; left: 45%; top: 20%; width: 10%; height: 100%; border-bottom: 4px solid #052859; } .row-login .login-top { position: absolute; right: 1rem; top: 1rem; } .row-login .login-top .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .row-login .login-top .navbar-nav .nav-item { margin: 0 0.5rem; } .row-login .login-top .navbar-nav .nav-item a { color: black; } .btn-deleteSec { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); color: white; border: none; outline: none; } .btn-deleteSec:hover { color: white; } .login-content { width: 80%; min-width: 350px; -webkit-box-shadow: 0 0 12px 5px #dddddd; box-shadow: 0 0 12px 5px #dddddd; padding: 1.5rem; border-radius: 2rem; } .link_privacy { color: black; } .login-content img { height: 80px; } .row-img img { width: 450px; } .login-content .form-floating input { border: none; border-bottom: 2px solid #d9d9d9; border-radius: 0; } .login-content .form-floating input:focus { -webkit-box-shadow: none; box-shadow: none; } .login-content #btn_login { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); font-weight: bold; color: white; border: 0 none; border-radius: 40px; cursor: pointer; padding: 10px 50px; margin: 10px auto; display: block; } .login-content #btn_login:hover { -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; } .login-content .btn-register { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); font-weight: bold; color: white; border: 0 none; border-radius: 40px; cursor: pointer; padding: 10px 50px; margin: 10px auto; display: block; } .login-content .btn-register:hover { -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; } .login-content .nav-tabs { border-bottom: none; } .login-content .nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .login-content .nav-tabs .nav-link { color: grey; } .login-content .nav-tabs .nav-link.active { border-color: #fff; text-transform: uppercase; color: black; } .navbar .btn-gocreate { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); color: white; border: 0 none; border-radius: 40px; cursor: pointer; padding: 10px 50px; } .container-bg { position: absolute; width: 600px; height: 400px; right: 0; bottom: 0; z-index: -1; } .container-profile .card-profile { margin-top: 4rem; border-radius: 10px; padding: 2rem; text-align: center; -webkit-box-shadow: 0px 0px 20px 1px #b4b4b4; box-shadow: 0px 0px 20px 1px #b4b4b4; } .container-profile .card-profile img { width: 120px; margin: 1rem auto; } .card-profile-txt { color: #6d6d6d; font-size: 1.2rem; font-weight: 500; } .card-profile-cnt { font-size: 1.5rem; font-weight: 700; } @media screen and (max-width: 900px) { .container-login { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .row-img { display: none; } .img-wave { display: none; } .row-login { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .container-bg { width: 400px; height: 300px; right: 0; bottom: 0; } } .psd_visible, .psd_invisible { right: 0.5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .register__policies { font-size: 12px; color: gray; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } /* Pricing */ @media screen and (max-width: 767px) { #pricing-nav { display: none; } } .pricingTable { background: #fff; font-family: "Open Sans", sans-serif; text-align: center; padding: 30px 15px 15px; border-radius: 25px; overflow: hidden; position: relative; z-index: 1; } .pricingTable:before, .pricingTable:after { content: ""; background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa); height: 170px; width: 150%; outline: 5px solid #fff; outline-offset: -10px; opacity: 0.9; -webkit-transform: translateX(-50%) rotate(7deg); transform: translateX(-50%) rotate(7deg); position: absolute; left: 50%; top: -65px; z-index: -1; } .pricingTable:after { height: 250px; -webkit-transform: translateX(-50%) rotate(-20deg) rotateX(180deg); transform: translateX(-50%) rotate(-20deg) rotateX(180deg); top: auto; bottom: -150px; } .pricingTable .pricingTable-header { color: #fff; margin: 0 0 75px; } .pricingTable .title { font-size: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0; } @media screen and (max-width: 767px) { .pricingTable .title { font-size: 30px; } } .pricingTable .pricing-content { text-align: left; padding: 0; margin: 0 0 10px; display: inline-block; } .pricingTable .pricing-content li { color: #333; font-size: 17px; font-weight: 500; line-height: 22px; text-transform: uppercase; padding: 0 40px 0 0; margin: 0 0 15px; list-style-position: inside; position: relative; } .pricingTable .pricing-content li:after { content: "\f00c"; color: #e58e26; font-family: "Font Awesome 5 Free"; font-size: 18px; font-weight: 900; position: absolute; top: 0; right: 0; } .pricingTable .pricing-content li.disable:after { content: "\f00d"; } .pricingTable .price-value { margin: 0 0 15px; } .pricingTable .price-title { color: #c70039; font-size: 30px; text-align: left; text-transform: uppercase; line-height: 30px; width: calc(100% - 130px); padding: 15px 0 0; display: inline-block; } .pricingTable .price-title b { display: block; } .pricingTable .price-amount { color: #3f64fa; background: #fff; font-size: 30px; font-weight: 700; line-height: 30px; width: 120px; height: 120px; padding: 33px 10px 10px; display: inline-block; vertical-align: top; -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); position: relative; z-index: 1; } .pricingTable .price-amount:before, .pricingTable .price-amount:after { content: ""; background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa); width: calc(100% - 12px); height: calc(100% - 12px); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); } .pricingTable .price-amount:after { background: #fff; width: calc(100% - 16px); height: calc(100% - 16px); } .pricingTable .price-amount .duration { font-size: 16px; font-weight: 600; text-transform: capitalize; display: block; } .pricingTable .pricingTable-signup a { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 10px 20px; border: 2px solid #fff; border-radius: 50px; display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover { text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); } .pricingTable.green:before, .pricingTable.green:after, .pricingTable.green .price-amount:before { background: linear-gradient(-45deg, #76d243, #76d243, #109739, #109739); } .pricingTable.green .price-amount { color: #109739; } .pricingTable.pink:before, .pricingTable.pink:after, .pricingTable.pink .price-amount:before { background: linear-gradient(-45deg, #e969a6, #e969a6, #ed2e96, #ed2e96); } .pricingTable.pink .price-amount { color: #ed2e96; } @media only screen and (max-width: 990px) { .pricingTable { margin: 0 0 40px; } } @media screen and (max-width: 767px) { .profile-bgimg { width: 100%; height: 300px; -o-object-fit: cover; object-fit: cover; display: none; } } @media screen and (min-width: 1025px) { .profile-bgimg-m { display: none; } } .navbar { background: none !important; } .arrowdoup { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .arrowdown { cursor: pointer; } .userprofile { position: relative; top: -80px; z-index: 20; } @media screen and (max-width: 767px) { .userprofile { top: 10px; z-index: 0; } } .userprofile .userprofile-content { width: 83vw; } @media screen and (max-width: 767px) { .userprofile .userprofile-content { width: 95vw; } } .userprofile .userprofile-content .user-information .information { width: 50%; margin: 0 auto; } @media screen and (max-width: 767px) { .userprofile .userprofile-content .user-information .information { width: 100%; } } .userprofile .userprofile-content .user-information .information h1 { color: #707070; font-size: 56px; } .userprofile .userprofile-content .user-information .information .share { font-size: 16px; } @media screen and (max-width: 767px) { .userprofile .userprofile-content .user-information .information .share .facebook { left: 15px; top: 1px; } } .userprofile .userprofile-content .user-information .information .share a { text-decoration: none; color: #183790; } .userprofile .userprofile-content .user-information .card { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); border-radius: 15px; } .userprofile .userprofile-content .user-information .check-history { cursor: pointer; } .userprofile .userprofile-content .user-information .historical-record th { border-bottom: none !important; color: #183790; font-weight: 900; } .userprofile .userprofile-content .user-information .historical-record td { font-size: 15px; } .userprofile .userprofile-content .user-information .draft { color: #183790; font-weight: 900; } .userprofile .userprofile-content .user-information .draft-table th { border-bottom: none !important; color: #183790; font-weight: 900; } .userprofile .userprofile-content .user-information .draft-table .draft-content-icon { cursor: pointer; } .userprofile .userprofile-content .user-information .share .form-control:hover, .userprofile .userprofile-content .user-information .share .form-control:focus, .userprofile .userprofile-content .user-information .share .form-control:active { outline: none !important; -webkit-box-shadow: none; box-shadow: none; } .userprofile .userprofile-content .user-information .share .btn:hover, .userprofile .userprofile-content .user-information .share .btn:focus, .userprofile .userprofile-content .user-information .share .btn:active { outline: none !important; -webkit-box-shadow: none; box-shadow: none; } .draft-table th { border-bottom: none !important; color: #183790; font-weight: 900; } .draft-table .draft-content-icon { cursor: pointer; } #draftModal .draft-table { font-size: .9rem; } .sidenav { width: 250px; position: fixed; height: 100%; z-index: 50; top: 0; overflow-x: hidden; -webkit-transition: 0.5s; transition: 0.5s; text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051)); background: linear-gradient(to bottom, #1c7ce0, #150051); } @media screen and (min-width: 1025px) { .sidenav { left: 0; } } @media screen and (max-width: 767px) { .sidenav { display: none; right: 0px; } } @media screen and (min-width: 1025px) { .sidenav .sidenav-content .close-btn { display: none; } } @media screen and (min-width: 1025px) { .sidenav .sidenav-content .Mobile-nav { display: none; } } @media screen and (max-width: 767px) { .sidenav .sidenav-content .choozmologo { margin-top: 10px; } } .sidenav .sidenav-content .reply { margin-left: 70px; } @media screen and (min-width: 1025px) { .sidenav .sidenav-content .reply { display: none; } } .sidenav hr { background: #fff; opacity: 1 !important; height: 1px; width: 85%; margin: 15px auto; } .sidenav .sidebar { width: 80%; margin: 0 auto; } .sidenav .user { -o-object-fit: cover; object-fit: cover; width: 8vw; } @media screen and (max-width: 767px) { .sidenav .user { width: 20vw; } } .sidenav .user-name { font-size: 1.5rem; } .sidenav .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .sidenav .navbar-nav .btn-gocreate { font-size: 1.7vmin; background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); color: white; border: 0 none; border-radius: 10px; cursor: pointer; margin: 10px 3px; display: inline; } @media screen and (max-width: 767px) { .sidenav .navbar-nav .btn-gocreate { font-size: 3.5vmin; } } .sidenav .navbar-nav .active { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); } .sidenav a { text-decoration: none; font-size: 32px; color: #f1f1f1; display: block; -webkit-transition: 0.3s; transition: 0.3s; } .sidenav a:hover { color: #818181; } .sidenav .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav .nav-list { color: white; list-style: none; text-align: center; } .sidenav .nav-list .nav-list-item { font-size: 18px; cursor: pointer; position: relative; } .sidenav .nav-list .nav-list-item::after { content: " "; position: absolute; width: 50%; height: 100%; left: 25%; top: 5px; border-bottom: 1px solid white; opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; } .sidenav .nav-list .nav-list-item:hover::after { opacity: 1; } .sidenav .right-text { padding-top: 150px; color: #fff; } @media screen and (max-width: 767px) { .sidenav .right-text { padding-top: 50px; } } .sidenav .right-text a { font-size: 16px; display: inline; margin: 2px; } .sidenav .right-text a img { -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%); filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%); } @media only screen and (max-width: 1280px) { .sidenav .right-text p { font-size: 16px; } } .index-banner { width: 85vw; margin: 0 auto; margin-top: 50px; } @media screen and (max-width: 767px) { .index-banner { margin-top: 30px; width: 100vw; } } .index-banner .PC-img { width: 100%; } @media screen and (max-width: 767px) { .index-banner .PC-img { margin-top: 30px; width: 100vw; } } .index-banner h1 { font-size: 48px; } @media screen and (max-width: 767px) { .index-banner h1 { font-size: 36px; text-align: center; } } .index-banner p { margin-top: 30px; font-size: 24px; width: 30vw; } @media screen and (max-width: 767px) { .index-banner p { width: 90vw; font-size: 18px; text-align: center; margin: 0 auto; } } .index-banner .index-CTA { margin-top: 50px; } @media screen and (max-width: 767px) { .index-banner .index-CTA { margin-top: 30px; text-align: center; } } .index-banner .index-CTA .CTA-btnA { margin-right: 10px; } .CTA-btnA { text-decoration: none; border-radius: 30px; border: none; padding: 10px; background: #fff; width: 200px; color: #ea5413; font-size: 24px; } @media screen and (max-width: 767px) { .CTA-btnA { margin: 10px; } } .CTA-btnB { text-decoration: none; border-radius: 30px; border: none; padding: 10px; background: #ea5413; width: 200px; color: #fff; font-size: 24px; } @media screen and (max-width: 767px) { .CTA-btnB { margin: 10px; } } .index-sec02 { background: -webkit-gradient(linear, left bottom, left top, color-stop(80%, #d4daec), color-stop(80%, #fff)); background: linear-gradient(to top, #d4daec 80%, #fff 80% 100%); padding-bottom: 50px; } @media screen and (max-width: 767px) { .index-sec02 { background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, #d4daec), color-stop(30%, #fff)); background: linear-gradient(to top, #d4daec 30%, #fff 30% 100%); padding-bottom: 10px; } } .index-sec02 .make-video { width: 90vw; margin: 0 auto; } .index-sec02 .make-video .makeVideo-text { margin-top: 150px; } .index-sec02 .make-video .makeVideo-text h1 { font-size: 48px; color: #2a3863; } @media screen and (max-width: 767px) { .index-sec02 .make-video .makeVideo-text h1 { font-size: 36px; text-align: center; } } .index-sec02 .make-video .makeVideo-text p { margin-top: 30px; font-size: 24px; color: #2a3863; } @media screen and (max-width: 767px) { .index-sec02 .make-video .makeVideo-text p { font-size: 18px; text-align: center; } } .sec-usecase { margin-top: 100px; margin-bottom: 100px; } .sec-usecase h1 { text-align: center; font-weight: 900; font-size: 2rem; color: #2a3863; } .sec-usecase hr { width: 7vw; height: 6px; background: #2a3863; opacity: 1 !important; margin: 0 auto; } @media screen and (max-width: 767px) { .sec-usecase hr { width: 15vw; } } .sec-usecase .usecase-block { border: none; position: relative; background-color: transparent; z-index: 1; margin-top: 30px; } @media screen and (max-width: 767px) { .sec-usecase .usecase-block { margin-top: 15px; } } .sec-usecase .usecase-block::after { position: absolute; bottom: 1rem; left: 5%; width: 90%; height: 10rem; background-color: #d4daec; content: " "; z-index: -1; border-radius: 2rem; margin-left: auto; margin-right: auto; } @media screen and (max-width: 1281px) { .sec-usecase .usecase-block::after { bottom: 0rem; } } @media screen and (max-width: 767px) { .sec-usecase .usecase-block::after { height: 7rem; bottom: 3rem; } } .sec-usecase .usecase-block .usecase-imgfr { width: 80%; margin: 0 auto; height: 40vh; background-position: center center; background-size: contain; background-repeat: no-repeat; } @media screen and (max-width: 767px) { .sec-usecase .usecase-block .usecase-imgfr { width: 80%; } } .sec-usecase .usecase-block .usecase-sub { background-color: transparent; color: #193179; position: relative; bottom: 25px; font-size: 1rem; font-weight: 900; } @media screen and (max-width: 1281px) { .sec-usecase .usecase-block .usecase-sub { bottom: 5px; } } @media screen and (max-width: 767px) { .sec-usecase .usecase-block .usecase-sub { bottom: 50px; } } .sec-usecase .usecase-block .usecase-sub i { color: #193179; } .indxe-CTA { background: #f0f0f0; } .indxe-CTA h2 { color: #ea5413; } .indxe-CTA .CTA-btnB { text-decoration: none; border-radius: 30px; border: none; padding: 10px; background: #ea5413; width: 200px; color: #fff; font-size: 24px; } .price-int { padding: 8vw 0px; } @media screen and (max-width: 767px) { .price-int { padding: 20vw 0px; } } .price-int .price-content { width: 80vw; } @media screen and (max-width: 767px) { .price-int .price-content { width: 90vw; } } .price-int .price-content .CTA-btnB { margin-top: 30px; } .price-int .price-content hr { width: 7vw; height: 6px; background: #2a3863; opacity: 1 !important; margin: 0 auto; } @media screen and (max-width: 767px) { .price-int .price-content hr { width: 15vw; } } .price-int .price-content h1 { text-align: center; font-weight: 900; font-size: 2rem; color: #2a3863; } .price-int .price-content .price-content-1 .price-item { margin-top: 50px; } @media screen and (max-width: 767px) { .price-int .price-content .price-content-1 .price-item { margin-top: 30px; } } .price-int .price-content .price-content-1 img { width: 128px; } @media screen and (max-width: 767px) { .price-int .price-content .price-content-1 img { width: 100px; } } .price-int .price-content .price-content-1 h2 { margin-top: 15px; font-weight: 600; font-size: 1.3rem; color: #ea5413; } @media screen and (max-width: 767px) { .price-int .price-content .price-content-1 h2 { text-align: left; font-size: 5.5vmin; } } .price-int .price-content .price-content-1 ul { text-align: left; color: #ea5413; } .price-int .price-content .price-content-1 ul li { list-style-type: disc; } @media screen and (max-width: 767px) { .price-int .price-content .price-content-1 ul li { font-size: 4vmin; } } .price-int .price-content .price-content-1 .price-text { padding-left: 80px; } @media screen and (max-width: 767px) { .price-int .price-content .price-content-1 .price-text { padding-left: 0px; } } .price-int .price-content .get-started { border: none; border-radius: 3rem; padding: 1rem 2.5rem; background: linear-gradient(20deg, #ea5413, #920783); color: #fff; font-size: 1.2rem; font-weight: 900; } .price-int .price-content p { font-size: 24px; } @media screen and (min-width: 1025px) { .register_btn { display: none; } } @media screen and (max-width: 767px) { .register_text { display: none; } } .footer { background-color: #f0f0f0; padding: 3rem; padding-left: 13rem; } @media screen and (max-width: 767px) { .footer { padding: 0.5rem; text-align: center; padding-top: 3rem; padding-left: 0; } } .footer h5 { font-size: 16px; font-weight: 700; color: #555555; } .footer .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer .footer-aigirl { font-weight: 600; font-size: 1.5rem; margin-top: 1rem; margin-bottom: 2.5rem; color: #555555; } @media screen and (max-width: 767px) { .footer .footer-aigirl { font-size: 1.3rem; margin-bottom: 2rem; } } .footer .footer-follow { font-size: 1rem; margin-bottom: 1rem; } @media screen and (max-width: 767px) { .footer-socials { margin-bottom: 2rem; } } .footer .footer-socials a { margin-right: 5px; } @media screen and (max-width: 767px) { .footer .footer-socials a { margin-right: 10px; } } @media screen and (max-width: 767px) { .footer-contacts { font-size: 14px; } } .menu-box { width: 40vw; right: 0px; position: fixed; z-index: 20; overflow: hidden; display: none; top: 0px; } @media screen and (min-width: 1025px) { .menu-box { display: none; } } .menu-box .menu-box2 { padding-bottom: 5vw; position: relative; width: 40vw; background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051)); background: linear-gradient(to bottom, #1c7ce0, #150051); z-index: 7; text-align: center; } .menu-box .menu-box2 a { display: inline-block; text-decoration: none; color: #fff; font-size: 18px; text-align: center; } /*# sourceMappingURL=style.css.map */