@font-face { font-family: 'Chronic'; src: url('./fonts/Chronic-Regular.eot'); src: url('./fonts/Chronic-Regular.eot?#iefix') format('embedded-opentype'), url('./fonts/Chronic-Regular.woff2') format('woff2'), url('./fonts/Chronic-Regular.woff') format('woff'), url('./fonts/Chronic-Regular.ttf') format('truetype'), url('./fonts/Chronic-Regular.svg#Chronic') format('svg'); font-weight: normal; } @font-face { font-family: 'ariston_comicbase'; src: url('./fonts/ariston_base-webfont.woff2') format('woff2'), url('./fonts/ariston_base-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'avenir'; src: url('./fonts/avenirltstd-book-webfont.woff2') format('woff2'), url('./fonts/avenirltstd-book-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'avenir'; } * { margin: 0; padding-left: 0; box-sizing: border-box; } img { height: auto; max-width: 100%; } a {text-decoration: none;} h1 , h2 , h3 , h4, h5, h6 { font-weight: normal; } h2 { font-family: 'ariston_comicbase'; text-transform: uppercase; margin: 0; font-size: 4.5vw; line-height: normal; color: #424242; } h2 span { color: #f14214; } h3 { font-size: 32px; } .btn { animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: 1; } .btn:hover { animation-name: rubberBand;} @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } /*slide 1*/ .slide-bg { width: 100%; height: auto;} .school-bus img ,.schoolbus-girl img , .slide-bg img { width: 100%;} .red-wave { position: relative; overflow: hidden; } .red-wave::after { background-image: url("./images/wave-bottom.png"); background-repeat: no-repeat; background-size: 100vw auto; background-position: bottom center; content: ""; width: 100%; height: 9vw; position: absolute; bottom: 0; } .school-bus { position: absolute; bottom: 8vw; width: 55vw; left: 3vw;} .schoolbus-girl { position: absolute; bottom: 7vw; left: 33vw; /* width: 12vw; */ width: 20vw; } .slider-1-text { position: absolute; right: 17vw; top: 31vw;} a.redbtn { font-family: 'ariston_comicbase'; color: #fff; text-transform: uppercase; background: url("./images/btn-bg.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 8vw; font-size: 2.6vw; width: 15vw; text-align: center; display: flex; align-items: center; justify-content: center; } /*slide 1*/ .slider-top-text { position: absolute; top: 6vw; left: 0; right: 0; text-align: center;} .slider-top-text h2 { text-transform: uppercase; margin: 0; font-size: 4.5vw; line-height: normal;} .select-anyone { position: absolute; bottom: 7vw; width: 26vw;} .select-pic { width: 100%; } .select-girl { left: 20vw;} .select-boy { left: 51vw;} img.arrow-select { position: absolute; width: 3.3vw; top: 14vw; right: -3.3vw;} .slider-top-text p { font-size: 1.18vw;} /*slide-3*/ .form-block { position: absolute; top: 11vw; width: 33vw; left: 29vw;} .form-block form { position: absolute; left: 19.5vw; width: 10.31vw; top: 12vw;} .form-block form label { color: #fff; text-transform: uppercase; font-weight: normal; font-family: 'Chronic'; display: block; margin: 0; letter-spacing: 0.05vw; font-size: 1.1vw; } .form-block form input { background-color: rgba(255,255,255,.3); border: 0; height: 3vw; border-radius: 0.5vw; outline: none; margin-bottom: 1vw; margin-top: 0.3vw; width: 100%; padding: 0.6vw; color: #fff; } .form-block form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgba(255,255,255,.5); opacity: 1; /* Firefox */ } .form-block form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255,255,255,.5); } .form-block form input::-ms-input-placeholder { /* Microsoft Edge */ color: rgba(255,255,255,.5); } .btn.submit-form { font-family: 'ariston_comicbase'; color: #fff; text-transform: uppercase; background: url("./images/btn-bg.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 6vw; font-size: 2.2vw; width: 11vw; text-align: center; display: flex; align-items: center; justify-content: center; border: none; position: absolute; bottom: -10vw; right: 4vw; } .bounce2 { animation: bounce2 3s ease 1; } @keyframes bounce2 { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(30px);} 60% {transform: translateY(20px);} } .form-bg img { width: 100%; } /*4*/ .slider-top-text-hang { position: absolute; top: 12vw; right: 24vw; left: auto; width: 18vw;} .slider-top-text-hang h2 { line-height: 3.2vw;} .slider-top-text-hang p { font-size: 1vw; padding-right: 4.5vw; margin-top: 0.5vw;} .hang-items { position: absolute;top: 0px; width: 10vw; } .hang-items img { width: 100%; } .astro-hang { left: 16vw;} .doctor-hang { left: 27.3vw;} .chef-hang { right: 14.5vw;} .artist-hang { right: 3vw;} .hang-items a { font-family: 'ariston_comicbase'; text-transform: uppercase; background: url("./images/btn-bg-white.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 6vw; font-size: 2vw; width: 9vw; text-align: center; display: flex; align-items: center; justify-content: center; border: none; color: #f34316; margin: 0px auto 0; } .astro-hang.hang-items a { width: 10vw; } .silde-4-girl { position: absolute; bottom: 8.8vw; left: 38vw; width: 17vw; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .silde-4-girl img { width: 100%; } .arrow-page-4 { position: absolute; bottom: 9vw; width: 25vw; display: flex; align-items: center; justify-content: space-between; left: 0; right: 0; margin: 0 auto 0; padding-right: 3vw; } .arrow-page-4 img { width: 3.5vw; } .silde-4-girl.silde-4-boy { -webkit-transform: scaleX(1); transform: scaleX(1); left: 40vw; } .hang-items { animation: swing ease-in-out 1s infinite alternate; transform-origin: center -20px; } @keyframes swing { 0% { transform: rotate(1deg); } 100% { transform: rotate(-1deg); } } .slider-left-fourbtn { position: absolute; top: 10vw; left: 8vw; text-align: center; color: #fff; width: 26vw; } .fourbtn-list { column-count: 2; } .fourbtn-list a.redbtn.btn { font-size: 1.6vw; line-height: 1.3vw; width: 10vw; height: 5.4vw; padding-left: 1vw; margin: 0 auto; } .slider-left-fourbtn h2 { font-size: 10vw; color: #fffefe; -webkit-text-stroke: 0.5vw #5b2a69; text-shadow: 0.7vw 0.6vw black; line-height: 6vw; } .astrunut-human { position: absolute; bottom: 7vw; left: 35vw; width: 22vw; } .astrunut-human img { width: 100%; } .slider-left-fourbtn h4 { font-size: 4vw; font-family: 'ariston_comicbase'; line-height: normal; } .fourbtn-list { padding: 0 2.2vw; } .hello-chat { position: absolute; top: 10vw; left: 57vw; background-color: #fff; border-radius: 50px; font-family: 'ariston_comicbase'; font-size: 3vw; font-weight: normal; color: #79378d; text-align: center; line-height: 2.2vw; padding: 1vw 1.3vw; max-width: 33vw; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset 0px -1px 3px 0 rgba(0,0,0,0.5); } .hello-chat::before { content: ""; display: inline-block; border-right: 2vw solid #fff; border-bottom: 0.6vw solid transparent; border-top: 0.6vw solid transparent; position: absolute; left: -1.4vw; top: 4vw; transform: rotate(-19deg); } .hello-chat span { display: block; } /*7*/ .doctor-human { position: absolute; bottom: 7vw; left: 38vw; width: 18.8vw;} .doctor-human img { width: 100%; } .slider-left-fourbtn.doctor-text h2 { -webkit-text-stroke: 0.5vw #887a96; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-doctor { color: #238d94; left: 54.5vw; top: 13vw;} /*8*/ .chef-human { position: absolute; bottom: 7vw; left: 48vw; width: 26.8vw;} .chef-human img { width: 100%; } .slider-left-fourbtn.chef-text h2 { -webkit-text-stroke: 0.5vw #768aa6; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-chef { color: #355da8; left: 70.5vw; top: 13vw;} .slider-left-fourbtn.chef-text { top: 7vw; left: 4vw;} .arrow-page-4.chef-arrow { left: 35vw;} /*9*/ .teacher-human { position: absolute; bottom: 7vw; left: 55vw; width: 19.5vw;} .teacher-human img { width: 100%; } .slider-left-fourbtn.teacher-text h2 { -webkit-text-stroke: 0.5vw #487d5a; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-teacher { color: #166053; left: 49.3vw; top: 14vw;} .hello-chat.hello-chat-girl-teacher::before { left: auto; right: -1vw; transform: rotate(199deg);} .slider-left-fourbtn.teacher-text { top: 10vw; left: 4vw;} .arrow-page-4.teacher-arrow { left: 35vw;} /*10*/ .scientist-human { position: absolute; bottom: 7vw; left: 33vw; width: 20vw;} .scientist-human img { width: 100%; } .slider-left-fourbtn.scientist-text h2 { -webkit-text-stroke: 0.5vw #7f73bc; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-scientist { color: #45aaeb; left: 52vw; top: 15vw;} .slider-left-fourbtn.scientist-text { top: 9vw; left: 7vw;} .arrow-page-4.scientist-arrow { left: -7vw;} /*11*/ .pilot-human { position: absolute; bottom: 8vw; left: 42vw; width: 18vw;} .pilot-human img { width: 100%; } .slider-left-fourbtn.pilot-text h2 { -webkit-text-stroke: 0.5vw #3a83ab; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-pilot { color: #3a83ab; left: 58vw; top: 12vw;} .slider-left-fourbtn.pilot-text { top: 10vw; left: 13vw;} .arrow-page-4.pilot-arrow { left: 6vw;} /*12*/ .artist-human { position: absolute; bottom: 8vw; left: 64vw; width: 20vw;} .artist-human img { width: 100%; } .slider-left-fourbtn.artist-text h2 { -webkit-text-stroke: 0.5vw #896a54; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-artist { color: #c75236; left: 82vw; top: 11.5vw;} .arrow-page-4.artist-arrow { left: 59vw;} .slider-left-fourbtn.artist-text { left: 14vw;} /*13*/ .architect-human { position: absolute; bottom: 7vw; left: 42vw; width: 18.8vw;} .architect-human img { width: 100%; } .slider-left-fourbtn.architect-text h2 { -webkit-text-stroke: 0.5vw #f98800; text-shadow: 3px 1px 20px rgba(0,0,0,0.1);} .hello-chat.hello-chat-girl-architect { color: #f98800; left: 58vw; top: 12.5vw;} .arrow-page-4.architect-arrow { left: 59vw;} .wiz-mob-main { display: none; } @media (max-width: 767px) { .wiz-dtp-main { display: none; } .wiz-mob-main { display: block; } .school-bus { bottom: 55vw; width: 135vw; left: -48vw;} .schoolbus-girl { bottom: 50vw; /* left: 24vw; width: 30vw; */ left: 27vw; width: 49vw; } a.redbtn , .btn.submit-form { height: 17vw; font-size: 6.6vw; width: 37vw;} .slider-1-text { right: 35vw; top: 129vw;} .red-wave::after { background-image: url(./images/mobile-wave-bottom.png); background-repeat: no-repeat; background-size: 100vw auto; background-position: bottom center; height: 37vw; } .select-anyone { bottom: 78vw; width: 46vw;} .select-boy { left: 20vw; bottom: 20vw;} .slider-top-text h2 { font-size: 9vw;} .slider-top-text p { font-size: 3.3vw;} .slider-top-text { top: 34vw;} img.arrow-select { width: 6.3vw; top: 25vw; right: -7.3vw;} .form-block { top: 51vw; width: 93vw; left: -6vw;} .form-block form { left: 54.5vw; width: 30.31vw; top: 35vw;} .form-block form label { font-size: 4vw;} .form-block form input { height: 7vw; margin-bottom: 2vw; margin-top: 1vw; padding: 0.6vw; font-size: 3vw; padding: 1vw;} .slider-top-text.insert-info-heading { top: 21vw;} .btn.submit-form { bottom: -38vw; height: 14vw; width: 34vw; padding-left: 4vw; left: -14vw;} .silde-4-girl { bottom: 20vw; left: 9vw; width: 34vw;} .slider-top-text-hang { top: 103vw; right: auto; left: 47vw; width: 45vw;} .slider-top-text-hang h2 { line-height: 7.5vw;} .slider-top-text-hang p { font-size: 3.3vw; padding-right: 0; margin-top: 1vw;} h2 { font-size: 10vw;} .arrow-page-4 { bottom: 21vw; width: 45vw; left: 42vw;} .arrow-page-4 img { width: 10.5vw;} .mobile-hang-items a { font-family: 'ariston_comicbase'; text-transform: uppercase; background: url("./images/btn-bg-white.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 9vw; font-size: 4vw; width: 19vw; text-align: center; display: flex; align-items: center; justify-content: center; border: none; color: #f34316; margin: 0px auto 0; } .hang-main-div { display: flex; flex-wrap: wrap; width: 100%; position: absolute; top: 27vw; padding: 3vw;} .mobile-hang-items { width: 25%; padding: 1vw 1vw 0vw 1vw; display: flex; flex-direction: column; justify-content: flex-end; } .mobile-hang-items img { width: 18vw; display: block; margin: 0 auto;} .silde-4-girl.silde-4-boy { left: 13vw;} .astrunut-human { bottom: 21vw; left: 22vw; width: 37vw;} .arrow-page-4.astronaut-arrow { left: -10vw; width: 54vw;} .hello-chat { top: 101vw; font-size: 6vw; line-height: 4.5vw; padding: 3vw;} .hello-chat::before { border-right: 4vw solid #fff; border-bottom: 2.6vw solid transparent; border-top: 2.6vw solid transparent; left: -2.4vw; top: 7vw;} .slider-left-fourbtn , .slider-left-fourbtn.chef-text , .slider-left-fourbtn.teacher-text , .slider-left-fourbtn.scientist-text , .slider-left-fourbtn.pilot-text , .slider-left-fourbtn.architect-text { top: 24vw; left: 20vw; width: 58vw; } .slider-left-fourbtn h4 { font-size: 9vw;} .slider-left-fourbtn h2 { font-size: 25vw; -webkit-text-stroke: 1vw #5b2a69; line-height: 15vw; -webkit-text-stroke-width: 1vw !important;} .fourbtn-list a.redbtn.btn { font-size: 4.5vw; line-height: 3.4vw; width: 26vw; height: 13.4vw; padding-left: 1.5vw;} .doctor-human , .teacher-human , .scientist-human , .pilot-human , .artist-human , .architect-human { bottom: 18vw; left: 32vw; width: 33vw;} .artist-human { left: 48vw;} .scientist-human { width: 38vw; left: 26vw;} .artist-human { width: 37vw;} .chef-human { bottom: 18vw; left: 21vw; width: 44vw;} .hello-chat.hello-chat-girl-doctor , .hello-chat.hello-chat-girl-chef , .hello-chat.hello-chat-girl-teacher , .hello-chat.hello-chat-girl-scientist , .hello-chat.hello-chat-girl-pilot , .hello-chat.hello-chat-girl-artist , .hello-chat.hello-chat-girl-architect { left: 61.5vw; top: 100vw;} .hello-chat.hello-chat-girl-teacher , .hello-chat.hello-chat-girl-pilot , .hello-chat.hello-chat-girl-artist { left: auto; right: 66vw;} .hello-chat.hello-chat-girl-teacher::before { right: -2vw;} .hello-chat.hello-chat-girl-pilot::before { left: auto; right: -2vw; transform: rotate(199deg);} .hello-chat.hello-chat-girl-artist { left: 81vw; right: auto;} }