$blueColor: #1F3CAE; $yellowColor: #FDAF3B; $Montserrat: 'Montserrat', sans-serif; .yellow-btn { background: #FDAF3B 0% 0% no-repeat padding-box; border-radius: 8px; display: inline-block; font-size: 20px; width: 200px; text-align: center; height: 50px; padding-top: 10px; color: #000000; font-weight: 400; &:hover { color: #000000; text-decoration: none; } } .modal-backdrop.show { opacity: 0.7; } .chat-pattern { padding: 10px 0 10px 0; margin-bottom: 20px; display: flex; flex-flow: wrap; align-items: center; background-size: 100%; position: relative; //background-image: url('../img/onboarding/chat_design.svg'); border-radius: 25px; p { font-size: 16px; line-height: 23px; color: $blueColor; font-family: $Montserrat; font-weight: 500; margin: 0; position: absolute; padding: 0 20px; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); } } .eda { max-width: 150px; margin: 50px auto 30px; display: table; &.eda-right { float: right; } } .onboarding-main { .loader, .loader:before, .loader:after { border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load7 1.8s infinite ease-in-out; animation: load7 1.8s infinite ease-in-out; } .loader { color: #9B9A9A; font-size: 10px; margin: 80px auto; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .loader:before, .loader:after { content: ''; position: absolute; top: 0; } .loader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader:after { left: 3.5em; } @-webkit-keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } } @keyframes load7 { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; } } } .disabled-cl { background-color: #cccccc; cursor: default; } .onboarding-main { margin-top: 20px; .carousel-inner { height: 90vh; max-height: 600px; } .carousel-item { height: 100%; >div { padding: 0 15px; } .yellow-btn { //position: fixed; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); //bottom: 20px; margin: 0 auto; //left: 50%; box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0,0,0,.12); z-index: 111111; position: absolute; bottom: 14px; left: 50%; } } .loading-screen { background-color: #ffffff; position: absolute; top: 20px; left: 0; right: 0; max-width: 375px; margin: 0 auto; bottom: 0; z-index: 1111111; } .container { max-width: 375px; background-color: #ffffff; } header { .container { //background-color: rgba(42,83,193,0.5); padding-top: 20px; padding-bottom: 10px; } } .eda-1 { margin-top: 0 !important; } .onboarding-section-1 { .container { padding-top: 30px; padding-bottom: 30px; } .personality-scroll { overflow: auto; height: 440px; } .carousel-item { transition: none; } .quote-scroll { overflow: auto; height: 400px; ul { display: flex; flex-flow: wrap; li { a { margin-right: 0; } } } } .personality-list { list-style: none; padding: 0; display: flex; flex-flow: wrap; margin-top: 30px; margin-left: 3px; li { a { display: inline-block; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; text-align: center; padding: 10px; border-radius: 10px; margin: 0 0 20px; width: 160px; min-height: 232px; float: left; &:nth-child(odd){ margin-left: 0; margin-right: 10px; } &:nth-child(even){ margin-right: 0; margin-left: 10px; } p { font-size: 14px; color: #09132D; margin-top: 10px; margin-bottom: 5px; } h4 { font-size: 12px; line-height: 14px; color: #030047; } &:hover, &:active, &:focus { text-decoration: none; } &.active { background-color: rgb(31,60,174); p, h4 { color: #ffffff; } } } .eda { width: 70px; margin-top: 10px; margin-bottom: 0; } } .eda-blk { p { font-size: 10px; line-height: 12px; text-align: left; } } } .eda-left { transform: rotateY(180deg); float: left; } .location-blk { box-shadow: 0px 12px 19px #3C80D116; border-radius: 15px; height: 50px; align-items: center; justify-content: center; display: flex; margin-bottom: 40px; input { height: 50px; width: 100%; border-radius: 30px; border: 1px solid #707070; text-indent: 10px; &:focus, &:active { outline: none; } } } .quote-main { //background-image: url("../img/onboarding/eda2.svg"); //background-repeat: no-repeat; //background-position: 134% 75px; .chat-pattern { margin-bottom: 50px; } .eda-right { margin-top: 0; position: absolute; top: 50%; right: -65px; } .quote-scroll { .active { background-color: rgb(31,60,174); p { color: #ffffff; padding-right: 22px; } } } } .carousel-next-prev { display: flex; width: 200px; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 15px; z-index: 111111; .next, .prev { box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0,0,0,.12); } a { &:first-child { img { transform: rotate(180deg); } } } } .quote-blk { box-shadow: 0px 12px 19px #3C80D116; background-color: #fff; border-radius: 15px; margin-bottom: 20px; height: 60px; margin-right: 45px; align-items: center; justify-content: center; display: flex; padding: 0 15px; background-position: 10px; min-height: 100px; background-image: url("../img/onboarding/quote.svg"); background-repeat: no-repeat; p { margin: 0; color: $blueColor; font-size: 18px; line-height: 22px; } &:hover { text-decoration: none; } } h5 { font-size: 18px; line-height: 20px; color: #09132D; margin-bottom: 20px; } .cat-blk { overflow: auto; margin-bottom: 30px; margin-top: 60px; ul { list-style: none; padding: 0; width: 1000px; li { display: inline-block; margin-right: 10px; width: 130px; a { background-color: $blueColor; color: #ffffff; display: flex; flex-flow: wrap; align-items: center; justify-content: center; padding: 5px; border-radius: 15px; height: 160px; text-align: center; img { width: 80px; margin: 0 auto; display: table; } &:hover, &:active, &:focus { text-decoration: none; } } } } } .sub-cat-blk { overflow: auto; margin-bottom: 30px; } .sub-cat-list { list-style: none; padding: 0; height: 400px; .active { background-color: $blueColor; color: #ffffff; } li { display: inline-block; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; a { color: $blueColor; font-size: 18px; line-height: 20px; display: inline-block; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 10px 10px #5468FF4D; border-radius: 7px; padding: 2px 10px; &:hover, &:active, &:focus { text-decoration: none; } } } } .year-list { display: flex; margin-top: 30px; margin-bottom: 40px; li { width: 100%; text-align: center; } a { color: #09132D; font-size: 18px; display: block; height: 30px; width: 30px; margin: 0 auto; &:hover, &:active, &:focus { text-decoration: none; } } .active { background-color: $blueColor; color: #ffffff; border-radius: 50%; } } .yellow-btn { color: #ffffff; margin: 0 auto; display: table; width: auto; font-size: 18px; padding: 10px 15px; font-family: $Montserrat; } } } @media only screen and (max-width: 767px) { .onboarding-main { .onboarding-section-1 { .personality-list { li { a { width: 145px; img { max-width: 100%; } } } } .carousel-next-prev { width: 260px; a { width: 100px !important; } } .yellow-btn { font-size: 15px; width: 320px !important; } } } }