* {margin: 0; font-family: 'Open Sans'; } body {background-color: #f8fcff; } main {position: relative; } .full-width {width: 100%; } .full-width-screen {width: 100vw; } .full-height {height: 100%; } .full-height-screen {height: 100vh; } .no-overflow {overflow: hidden; } .default-overflow {overflow: initial!important; } .no-underline {text-decoration: none; } .text-unbold {font-weight: normal; } .text-center {text-align: center; } .text-justify {text-align: justify; } .text-uppercase {text-transform: uppercase; } /* * font */ h1, .h1 {font-size: 28px; line-height: 38px; margin-bottom: 20px; } h2, .h2 {font-size: 19px; line-height: 34px; } p, .p {font-size: 18px; color: #989ea3; margin-bottom: 20px; line-height: 30px; font-family: 'Lato'; } .text-error {font-family: 'Lato'; } .text-semibold {font-weight: 500; } .text-opensans {font-family: 'Open Sans'; } @media (min-width: 980px) {h1, .h1 {font-size: 55px; line-height: 67px; } h2, .h2 {font-size: 30px; line-height: 46px; } } @media (min-width: 1824px) {h1, .h1 {font-size: 80px; line-height: 92px; margin-bottom: 30px; } p, .p {font-size: 20px; line-height: 38px; } } /* * text color */ .text-blue {color: #373f6e; } .text-mediumblue {color: #678ba7; } .text-lightblue {color: #5ca3ca; } .text-lightblue-bold {color: #3a77a5; } .text-bluegreen {color: #72cfd8; } .text-error {color: #df4440; } /* error message */ .err-msg {float: left; padding-left: 25px; visibility: hidden; } .err-msg.visible {visibility: visible; } .err-msg .fa {position: relative; color: #fff; line-height: 20px; margin-right: 13px; font-size: 14px; z-index: 1; } .err-msg .fa:after {content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 20px; margin-left: -10px; background-color: #df4440; border-radius: 3px; z-index: -1; } @media (min-width: 768px) {.err-msg {margin-left: 52%; white-space: nowrap; margin-top: 10px; margin-bottom: 10px; } } /* * border */ .border-left {position: relative; padding-left: 15px; } .border-left:after {content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; border-left: 2.5px solid #77cfd3; } /* * button */ .btn {display: inline-block; color: #000; text-decoration: none; cursor: pointer; background-color: #989ea3; border: 1px solid #989ea3; font-size: 18px; margin: 8px 0; padding: 10px 25px; border-radius: 8px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .btn .arrow {margin-left: 8px; font-size: 16px; line-height: 14px; } .btn-blue, .btn-blue:focus {color: #fff; background-color: #72cfd8; border-color: #72cfd8; } .btn-blue:hover {background-color: #373f6e; border-color: #373f6e; } .btn-choices {color: #373f6e; background-color: transparent; border-color: #72cfd8; padding: 0; line-height: 30px; margin: 0; width: 100%; height: 30px; font-weight: bold; text-align: center; } .btn-choices:hover, input.q-input:checked ~ .btn-choices {color: #fff; background-color: #72cfd8; } .btn-error {border-color: #df4440; } @media (max-width: 767px) {.btn-choices {line-height: 40px; width: 40px; height: 40px; border-radius: 100%; } } @media (min-width: 1824px) {.btn {font-size: 20px; line-height: 38px; } .btn .arrow {font-size: 22px; line-height: 38px; } } /* * container */ .container {max-width: 100%; padding-left: 15px; padding-right: 15px; } .container-fluid {max-width: 100%; padding-left: 30px; padding-right: 30px; } .container-fluid, .container {margin-left: auto; margin-right: auto; } @media (min-width: 768px) {.container {max-width: 700px; padding-left: 30px; padding-right: 30px; } } @media (min-width: 980px) {.container {max-width: 900px; } } @media (min-width: 1200px) {.container {max-width: 1100px; } } @media (min-width: 1824px) {.container {max-width: 1500px; } } @media (min-width: 980px) and (orientation: landscape) {.container-fluid {max-width: 85%; } } /* * row & contianer */ .row {/* display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: -webkit-wrap; flex-wrap: -moz-wrap; flex-wrap: -ms-wrap; flex-wrap: -o-wrap; flex-wrap: wrap; */ /*overflow: auto;*/ overflow: auto; max-width: 100%; } .col {/* flex-grow: 0; flex-shrink: 1; */ position: relative; float: left; padding-left: 0; padding-right: 0; } .pull-left {float: left; } .pull-right {float: right; } .xs-1 {width: 8.33333%; } .xs-2 {width: 16.66667%; } .xs-3 {width: 25%; } .xs-4 {width: 33.33333%; } .xs-5 {width: 41.66667%; } .xs-6 {width: 50%; } .xs-7 {width: 58.33333%; } .xs-8 {width: 66.66667%; } .xs-9 {width: 75%; } .xs-10 {width: 83.33333%; } .xs-11 {width: 91.66667%; } .xs-12 {width: 100%; } .xs-push-1 {left: 8.33333%; } .xs-push-2 {left: 16.66667%; } .xs-push-3 {left: 25%; } .xs-push-4 {left: 33.33333%; } .xs-push-5 {left: 41.66667%; } .xs-push-6 {left: 50%; } .xs-push-7 {left: 58.33333%; } .xs-push-8 {left: 66.66667%; } .xs-push-9 {left: 75%; } .xs-push-10 {left: 83.33333%; } .xs-push-11 {left: 91.66667%; } .xs-push-12 {left: 100%; } .xs-pull-1 {right: 8.33333%; } .xs-pull-2 {right: 16.66667%; } .xs-pull-3 {right: 25%; } .xs-pull-4 {right: 33.33333%; } .xs-pull-5 {right: 41.66667%; } .xs-pull-6 {right: 50%; } .xs-pull-7 {right: 58.33333%; } .xs-pull-8 {right: 66.66667%; } .xs-pull-9 {right: 75%; } .xs-pull-10 {right: 83.33333%; } .xs-pull-11 {right: 91.66667%; } .xs-pull-12 {right: 100%; } @media (max-width: 767px) {.no-pull-mob {float: initial; } } @media (min-width: 768px) {.sm-1 {width: 8.33333%; } .sm-2 {width: 16.66667%; } .sm-3 {width: 25%; } .sm-4 {width: 33.33333%; } .sm-5 {width: 41.66667%; } .sm-6 {width: 50%; } .sm-7 {width: 58.33333%; } .sm-8 {width: 66.66667%; } .sm-9 {width: 75%; } .sm-10 {width: 83.33333%; } .sm-11 {width: 91.66667%; } .sm-12 {width: 100%; } .sm-push-1 {left: 8.33333%; } .sm-push-2 {left: 16.66667%; } .sm-push-3 {left: 25%; } .sm-push-4 {left: 33.33333%; } .sm-push-5 {left: 41.66667%; } .sm-push-6 {left: 50%; } .sm-push-7 {left: 58.33333%; } .sm-push-8 {left: 66.66667%; } .sm-push-9 {left: 75%; } .sm-push-10 {left: 83.33333%; } .sm-push-11 {left: 91.66667%; } .sm-push-12 {left: 100%; } .sm-pull-1 {right: 8.33333%; } .sm-pull-2 {right: 16.66667%; } .sm-pull-3 {right: 25%; } .sm-pull-4 {right: 33.33333%; } .sm-pull-5 {right: 41.66667%; } .sm-pull-6 {right: 50%; } .sm-pull-7 {right: 58.33333%; } .sm-pull-8 {right: 66.66667%; } .sm-pull-9 {right: 75%; } .sm-pull-10 {right: 83.33333%; } .sm-pull-11 {right: 91.66667%; } .sm-pull-12 {right: 100%; } } @media (min-width: 980px) {.md-1 {width: 8.33333%; } .md-2 {width: 16.66667%; } .md-3 {width: 25%; } .md-4 {width: 33.33333%; } .md-5 {width: 41.66667%; } .md-6 {width: 50%; } .md-7 {width: 58.33333%; } .md-8 {width: 66.66667%; } .md-9 {width: 75%; } .md-10 {width: 83.33333%; } .md-11 {width: 91.66667%; } .md-12 {width: 100%; } .md-push-1 {left: 8.33333%; } .md-push-2 {left: 16.66667%; } .md-push-3 {left: 25%; } .md-push-4 {left: 33.33333%; } .md-push-5 {left: 41.66667%; } .md-push-6 {left: 50%; } .md-push-7 {left: 58.33333%; } .md-push-8 {left: 66.66667%; } .md-push-9 {left: 75%; } .md-push-10 {left: 83.33333%; } .md-push-11 {left: 91.66667%; } .md-push-12 {left: 100%; } .md-pull-1 {right: 8.33333%; } .md-pull-2 {right: 16.66667%; } .md-pull-3 {right: 25%; } .md-pull-4 {right: 33.33333%; } .md-pull-5 {right: 41.66667%; } .md-pull-6 {right: 50%; } .md-pull-7 {right: 58.33333%; } .md-pull-8 {right: 66.66667%; } .md-pull-9 {right: 75%; } .md-pull-10 {right: 83.33333%; } .md-pull-11 {right: 91.66667%; } .md-pull-12 {right: 100%; } } @media (min-width: 1200px) {.lg-1 {width: 8.33333%; } .lg-2 {width: 16.66667%; } .lg-3 {width: 25%; } .lg-4 {width: 33.33333%; } .lg-5 {width: 41.66667%; } .lg-6 {width: 50%; } .lg-7 {width: 58.33333%; } .lg-8 {width: 66.66667%; } .lg-9 {width: 75%; } .lg-10 {width: 83.33333%; } .lg-11 {width: 91.66667%; } .lg-12 {width: 100%; } .lg-push-1 {left: 8.33333%; } .lg-push-2 {left: 16.66667%; } .lg-push-3 {left: 25%; } .lg-push-4 {left: 33.33333%; } .lg-push-5 {left: 41.66667%; } .lg-push-6 {left: 50%; } .lg-push-7 {left: 58.33333%; } .lg-push-8 {left: 66.66667%; } .lg-push-9 {left: 75%; } .lg-push-10 {left: 83.33333%; } .lg-push-11 {left: 91.66667%; } .lg-push-12 {left: 100%; } .lg-pull-1 {right: 8.33333%; } .lg-pull-2 {right: 16.66667%; } .lg-pull-3 {right: 25%; } .lg-pull-4 {right: 33.33333%; } .lg-pull-5 {right: 41.66667%; } .lg-pull-6 {right: 50%; } .lg-pull-7 {right: 58.33333%; } .lg-pull-8 {right: 66.66667%; } .lg-pull-9 {right: 75%; } .lg-pull-10 {right: 83.33333%; } .lg-pull-11 {right: 91.66667%; } .lg-pull-12 {right: 100%; } } @media (min-width: 1824px) {.xl-1 {width: 8.33333%; } .xl-2 {width: 16.66667%; } .xl-3 {width: 25%; } .xl-4 {width: 33.33333%; } .xl-5 {width: 41.66667%; } .xl-6 {width: 50%; } .xl-7 {width: 58.33333%; } .xl-8 {width: 66.66667%; } .xl-9 {width: 75%; } .xl-10 {width: 83.33333%; } .xl-11 {width: 91.66667%; } .xl-12 {width: 100%; } .xl-push-1 {left: 8.33333%; } .xl-push-2 {left: 16.66667%; } .xl-push-3 {left: 25%; } .xl-push-4 {left: 33.33333%; } .xl-push-5 {left: 41.66667%; } .xl-push-6 {left: 50%; } .xl-push-7 {left: 58.33333%; } .xl-push-8 {left: 66.66667%; } .xl-push-9 {left: 75%; } .xl-push-10 {left: 83.33333%; } .xl-push-11 {left: 91.66667%; } .xl-push-12 {left: 100%; } .xl-pull-1 {right: 8.33333%; } .xl-pull-2 {right: 16.66667%; } .xl-pull-3 {right: 25%; } .xl-pull-4 {right: 33.33333%; } .xl-pull-5 {right: 41.66667%; } .xl-pull-6 {right: 50%; } .xl-pull-7 {right: 58.33333%; } .xl-pull-8 {right: 66.66667%; } .xl-pull-9 {right: 75%; } .xl-pull-10 {right: 83.33333%; } .xl-pull-11 {right: 91.66667%; } .xl-pull-12 {right: 100%; } } /* * hidden */ .hidden {display: none!important; } @media (max-width: 767px) {.xs-hidden {display: none!important; } } @media (min-width: 768px) and (max-width: 979px) {.sm-hidden {display: none!important; } } @media (min-width: 980px) and (max-width: 1199px) {.md-hidden {display: none!important; } } @media (min-width: 1200px) and (max-width: 1823px) {.lg-hidden {display: none!important; } } @media (min-width: 1824px) {.xl-hidden {display: none!important; } } /* * padding and margin */ .col-padding {padding-left: 8px; padding-right: 8px; } .no-margin {margin: 0!important; } .no-margin-top {margin-top: 0!important; } .no-margin-bottom {margin-bottom: 0!important; } .no-margin-left {margin-left: 0!important; } .no-margin-right {margin-right: 0!important; } .no-padding {padding: 0!important; } .no-padding-top {padding-top: 0!important; } .no-padding-bottom {padding-bottom: 0!important; } .no-padding-left {padding-left: 0!important; } .no-padding-right {padding-right: 0!important; } @media (min-width: 768px) {.sm-no-margin {margin: 0!important; } .sm-no-margin-top {margin-top: 0!important; } .sm-no-margin-bottom {margin-bottom: 0!important; } .sm-no-margin-left {margin-left: 0!important; } .sm-no-margin-right {margin-right: 0!important; } .sm-no-padding {padding: 0!important; } .sm-no-padding-top {padding-top: 0!important; } .sm-no-padding-bottom {padding-bottom: 0!important; } .sm-no-padding-left {padding-left: 0!important; } .sm-no-padding-right {padding-right: 0!important; } } @media (min-width: 980px) {.md-no-margin {margin: 0!important; } .md-no-margin-top {margin-top: 0!important; } .md-no-margin-bottom {margin-bottom: 0!important; } .md-no-margin-left {margin-left: 0!important; } .md-no-margin-right {margin-right: 0!important; } .md-no-padding {padding: 0!important; } .md-no-padding-top {padding-top: 0!important; } .md-no-padding-bottom {padding-bottom: 0!important; } .md-no-padding-left {padding-left: 0!important; } .md-no-padding-right {padding-right: 0!important; } } @media (min-width: 1200px) {.lg-no-margin {margin: 0!important; } .lg-no-margin-top {margin-top: 0!important; } .lg-no-margin-bottom {margin-bottom: 0!important; } .lg-no-margin-left {margin-left: 0!important; } .lg-no-margin-right {margin-right: 0!important; } .lg-no-padding {padding: 0!important; } .lg-no-padding-top {padding-top: 0!important; } .lg-no-padding-bottom {padding-bottom: 0!important; } .lg-no-padding-left {padding-left: 0!important; } .lg-no-padding-right {padding-right: 0!important; } } @media (min-width: 1824px) {.xl-no-margin {margin: 0!important; } .xl-no-margin-top {margin-top: 0!important; } .xl-no-margin-bottom {margin-bottom: 0!important; } .xl-no-margin-left {margin-left: 0!important; } .xl-no-margin-right {margin-right: 0!important; } .xl-no-padding {padding: 0!important; } .xl-no-padding-top {padding-top: 0!important; } .xl-no-padding-bottom {padding-bottom: 0!important; } .xl-no-padding-left {padding-left: 0!important; } .xl-no-padding-right {padding-right: 0!important; } } /* * body */ body.home, body.question1, body.question2, body.question3, body.question4 {position: relative; min-height: 100vh; } body.home:before, body.home:after, body.question1:before, body.question1:after, body.question2:before, body.question2:after, body.question3:before, body.question3:after, body.question4:before, body.question4:after   {content: ""; position: absolute; background-repeat: no-repeat; background-size: 100% auto; z-index: -1; } body.home:before {bottom: 0; left: 0; width: 200px; height: 75px; background-image: url('../images/home-bottom-wave.png'); } body.home:after {bottom: 200px; right: 0; width: 33px; height: 205px; background-image: url('../images/home-bottom-wave-2.png'); } body.question1:before {top: 0; left: 0; width: 222px; height: 184px; background-image: url('../images/question1-wave-1.png'); } body.question1:after {bottom: 0; right: 0; width: 208px; height: 295px; background-image: url('../images/question1-wave-2.png'); background-position: 60px; } body.question2:before {top: 0; right: 0; width: 225px; height: 155px; background-image: url('../images/question2-wave-1.png'); } body.question2:after {bottom: 0; left: 0; width: 261px; height: 89px; background-image: url('../images/question2-wave-2.png'); } body.question3:before {top: 220px; left: 0; width: 155px; height: 435px; background-image: url('../images/question3-wave-1.png'); } body.question3:after {bottom: 0; right: 0; width: 78px; height: 220px; background-image: url('../images/question3-wave-2.png'); } body.question4:before {top: 0; left: 0; width: 235px; height: 57px; background-image: url('../images/question4-wave-1.png'); } body.question4:after {bottom: 0; right: 0; width: 237px; height: 45px; background-image: url('../images/question4-wave-2.png'); } @media (min-width: 480px) {body.home:before {width: 447px; height: 170px; } body.home:after {width: 53px; height: 235px; } } @media (min-width: 768px) {body.question1:before {width: 422px; height: 184px; } body.question1:after {width: 408px; height: 595px; background-position: initial; } body.question2:before {width: 725px; height: 155px; } body.question2:after {width: 661px; height: 229px; } body.question3:before {top: 50%; width: 215px; height: 435px; margin-top: -217px; } body.question3:after {top: 50px; bottom: auto; width: 138px; height: 570px; } body.question4:before {width: 635px; height: 157px; } body.question4:after {width: 837px; height: 175px; } } /* * header */ .header {padding-top: 60px; } /* * footer */ .footer {padding-bottom: 40px; } .footer p, .footer .p {text-align: center; font-size: 16px; margin-bottom: 15px; line-height: 28px; } @media (min-width: 980px) {.footer p, .footer .p {text-align: left; } } /* * main */ .main {padding-top: 40px; padding-bottom: 40px; } /* * result page */ .result-wrap {text-align: center; } .result-wrap .col-padding {padding-left: 15px; padding-right: 15px; } .result-wrap .text-thank-you {display: block; margin-bottom: 8px; letter-spacing: 0.8px; } @media (min-width: 768px) {.result-wrap {text-align: left; padding-bottom: 80px; } } /* * brand */ .brand img {width: 70px; } @media (min-width: 480px) {.brand img {width: 100px; } } /* * Home Page */ .home-page {padding: 40px 0; } .home-page .break-line, .home-page .img-desktop {display: none; } .home-page .baby-sick {margin-top: -50px; margin-left: -30px; margin-right: -30px; } .home-page .img-mob {display: block; } .home-page .content {margin-top: 15px; text-align: center; } .home-page .brand img {width: 80px; } @media (min-width: 768px) {.home-page .baby-sick {margin-top: -100px; } .home-page .content p {width: 300px; margin-right: auto; margin-left: auto; } .home-page .brand img {width: 180px; } } @media (min-width: 980px) {.home-page .baby-sick {margin-top: 0; } .home-page .content p {width: auto; margin-right: 0; margin-left: 0; } .home-page .brand img {width: auto; } } @media (min-width: 980px) and (orientation: landscape) {.home-page {padding: 0; } .home-page .brand img {width: 100px; } .home-page .break-line, .home-page .img-desktop {display: block; } .home-page .img-mob {display: none; } .home-page .content-wrapper {position: absolute; width: 100%; top: 0; left: 0; padding-top: 30px; z-index: 1; } .home-page .content {margin-top: 30px; text-align: left; } } @media (min-width: 1025px) and (orientation: landscape) {.home-page .content {margin-top: 70px; } .home-page .content-wrapper {padding-top: 60px; } .home-page .brand img {width: auto; } } @media (min-width: 1824px) {.home-page .content-wrapper {padding-top: 100px; } .home-page .content {margin-top: 110px; } } /* * Question page */ .questions-wrap {position: relative; } .q-box {background-color: #fff; border: 1px solid #fff; border-radius: 15px; box-shadow: -4px 4px 3px 3px #ecf7ff; padding: 30px 20px; margin-top: 50px; margin-bottom: 8px; } .q-box .q-box-num {padding: 0; margin-left: -10px; margin-right: -10px; margin-bottom: 20px; list-style-type: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; cursor: pointer; } .q-box .q-box-num li {width: 50px; height: 50px; background-color: #95c8fc; border: 3px solid #c5edfc; border-radius: 100%; text-align: center; line-height: 50px; color: #373f6e; font-size: 18px; text-transform: uppercase; font-weight: 500; margin-top: -60px; display: none; } .q-box .q-box-num li.active {background-color: #373f6e; color: #fff; display: block; } .q-choice-control.left {float: left; } .q-choice-control.right {float: right; } .q-choice-control.left a:after {position: absolute; content: "BACK"; line-height: 44px; left: 20px; } .q-choice-control.right a:before {position: absolute; content: "NEXT"; line-height: 44px; right: 20px; } .q-choice-control a {position: relative; font-size: 16px; font-weight: bold; color: #373f6e; text-decoration: none; } .q-choice-control a .fa {font-size: 40px; } .q-choice-control a.disabled {cursor: default; color: #ecf7ff; } .q-box .q-question {text-align: center; } .q-choices table {width: 100%; } .q-choices table p {margin-bottom: 0; } .q-choices table th {text-align: left; } .q-choices table td {width: 24%; padding-left: 5px; padding-right: 5px; } .q-choices .img-wrap {display: inline-block; width: 30px; text-align: center; margin: 0 8px; } .q-questions-wrap {position: relative; width: 100%; overflow: hidden; } .q-questions-container {position: relative; width: 99999px; left: 0; -webkit-transition: left 0.8s ease-in-out; -moz-transition: left 0.8s ease-in-out; -ms-transition: left 0.8s ease-in-out; -o-transition: left 0.8s ease-in-out; transition: left 0.8s ease-in-out; } .q-questions-wrap .q-question-item {width: 100vw; float: left; } @media (min-width: 768px) {.q-box {padding: 30px 60px; } .q-box-mob {background-color: transparent; border: none; box-shadow: none; padding: 0; margin-top: 0; margin-bottom: 0; } .q-box .q-box-num li {display: block; } .q-box .q-box-num li:before {content: "q"; } .q-box .q-box-num {margin-bottom: 5px; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } .q-box .q-question {text-align: left; } .q-choices table {width: 78%; margin-left: 15%; margin-right: 7%; } .q-choices table td {padding-left: 15px; padding-right: 15px; } .q-choices .img-wrap {width: 60px; margin: 0 20px; } .q-choice-control {position: absolute; top: 50%; margin-top: -7px; } .q-choice-control.left {left: 15px; } .q-choice-control.right {right: 15px; } .q-choice-control.left a:after, .q-choice-control.right a:before {content: ""; } } @media (max-width: 767px) {.questions-wrap {padding-top: 20px; padding-bottom: 20px; } .q-box-mob .q-box {background-color: transparent; border: none; box-shadow: none; padding: 0; margin-top: 0; margin-bottom: 0; } .q-choices table p, .q-choices table label {font-size: 12px; } .q-choices .img-wrap {line-height: 14px; } .q-choices .img-mother {width: 14px; } .q-choices .img-father {width: 13px; } .q-choices .img-siblings {width: 30px; line-height: 30px; } } /*  media queries */ @media (min-width: 480px) {} @media (min-width: 768px) {} @media (min-width: 980px) {} @media (min-width: 1200px) {} @media (min-width: 1824px) {}