| /* -------------------------------- |
| |
| Main Components |
| Source: https://codepen.io/elorenn/pen/qXzXPv |
| |
| -------------------------------- */ |
| .bsection { |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| min-width: 1em; |
| overflow: scroll; |
| flex-wrap: wrap; |
| flex-basis: 50%; |
| } |
| .bsection:first-of-type { |
| border-right: 2px solid #fff; |
| } |
| |
| .badge { |
| cursor: help; |
| background: #e7cc9c; |
| height: 33%; |
| width: 33%; |
| min-width: 30%; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); |
| filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); |
| transition: 150ms linear; |
| } |
| .badge:hover { |
| -webkit-transform: translateY(-2px); |
| transform: translateY(-2px); |
| -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15)); |
| filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15)); |
| } |
| .badge:active:after { |
| content: 'Prost!'; |
| position: absolute; |
| color: #fff; |
| font-family: sans-serif; |
| text-transform: uppercase; |
| font-weight: bold; |
| font-size: 3em; |
| letter-spacing: .1em; |
| top: -25%; |
| } |
| .badge.anim { |
| height: 33%; |
| width: 33%; |
| } |
| .badge.anim:active:after { |
| content: 'cheers!'; |
| } |
| |
| .beer-single-div { |
| position: relative; |
| height: 150px; |
| width: 112.5px; |
| min-width: 112.5px; |
| margin-top: 30px; |
| background-image: radial-gradient(97.5px 22.5px at 50% 103%, #f1ecdb 40%, transparent 40%), radial-gradient(6px 9px at 15% 67%, #ffe799 80%, transparent 83%), radial-gradient(6px 9px at 15% 18%, #ffe799 80%, transparent 83%), radial-gradient(9px 9px at 25% 85%, #ffda66 80%, transparent 80%), radial-gradient(25.5px 45px at 15% 90%, #ffc200 70%, transparent 70%), radial-gradient(25.5px 25.5px at 15% 5%, #ffc200 70%, transparent 70%), linear-gradient(to right, transparent 0%, transparent 10%, #ffe799 10%, #ffe799 20%, transparent 20%), radial-gradient(6px 6px at 70% 45%, #fecf75 80%, transparent 80%), radial-gradient(7.5px 7.5px at 35% 27%, #ffda66 80%, transparent 80%), radial-gradient(4.5px 4.5px at 80% 12%, #fecf75 80%, transparent 80%), radial-gradient(6px 6px at 60% 81%, #fecf75 80%, transparent 80%), radial-gradient(4.5px 4.5px at 89% 89%, #fecf75 80%, transparent 80%), radial-gradient(7.5px 7.5px at 77% 78%, #fecf75 80%, transparent 80%), radial-gradient(4.5px 4.5px at 40% 57%, #ffda66 80%, transparent 80%), linear-gradient(to right, #ffc200 50%, #fdac10 50%); |
| border-radius: 0 0 15% 15%; |
| border: 9px solid #f1ecdb; |
| /*mug*/ |
| box-sizing: border-box; |
| } |
| .beer-single-div:before { |
| content: ''; |
| position: absolute; |
| z-index: -1; |
| border-radius: 0 50% 50% 0; |
| height: 75px; |
| width: 52.5px; |
| top: 22.5px; |
| right: -49.5px; |
| background-color: transparent; |
| box-sizing: border-box; |
| border: 12px solid #f1ecdb; |
| /*mug handle*/ |
| border-left: 12px solid transparent; |
| } |
| .beer-single-div:after { |
| content: ''; |
| position: absolute; |
| top: -20%; |
| right: 20%; |
| height: 15px; |
| width: 15px; |
| background: #fffef8; |
| border-radius: 25.5px; |
| box-shadow: 0 16.5px 0 10.5px #fff9de, 0 10.5px 0 10.5px #fffef8, -40.5px 10.5px 0 6px #fff9de, -58.5px 9px 0 9px #fffef8, -27px 18px 0 6px #fff9de, -75px 12px 0 6px #fff9de, -22.5px 0 0 9px #fffef8, 21px 10.5px 0 9px #fffef8, -48px -12px 0 7.5px #fffef8, -27px -21px 0 7.5px #fff9de, -7.5px -10.5px 0 7.5px #fff9de, 10.5px -7.5px 0 1.5px #fffef8, 13.5px -10.5px 0 1.5px #fff9de, 37.5px 10.5px 0 1.5px #fff9de; |
| } |
| |
| .beer-animation-wrapper { |
| position: relative; |
| overflow-y: hidden; |
| padding: 25.5px; |
| padding-right: 0; |
| padding-top: 10%; |
| } |
| .beer-animation-wrapper .beer { |
| position: relative; |
| height: 150px; |
| width: 112.5px; |
| min-width: 112.5px; |
| margin-top: 48px; |
| margin-right: 40.5px; |
| margin-left: 13.5px; |
| z-index: -2; |
| background-image: radial-gradient(97.5px 22.5px at 50% 103%, #f1ecdb 40%, transparent 40%), linear-gradient(to right, #ffc200 50%, #fdac10 50%); |
| border-radius: 0 0 15% 15%; |
| /*mug*/ |
| border: 9px solid #f1ecdb; |
| box-sizing: border-box; |
| } |
| .beer-animation-wrapper .beer:before { |
| content: ''; |
| position: absolute; |
| height: 130%; |
| width: 100%; |
| bottom: -5%; |
| z-index: -1; |
| opacity: 1; |
| -webkit-animation: 3s bubbles linear infinite; |
| animation: 3s bubbles linear infinite; |
| background: radial-gradient(9px 9px at 25% 85%, #ffda66 80%, transparent 80%), radial-gradient(6px 6px at 70% 45%, #fecf75 80%, transparent 80%), radial-gradient(7.5px 7.5px at 35% 40%, #fecf75 80%, transparent 80%), radial-gradient(4.5px 4.5px at 80% 30%, #fecf75 80%, transparent 80%), radial-gradient(6px 6px at 60% 81%, #fecf75 80%, transparent 80%), radial-gradient(4.5px 4.5px at 89% 89%, #fecf75 80%, transparent 80%), radial-gradient(7.5px 7.5px at 77% 78%, #fecf75 80%, transparent 80%), radial-gradient(4.5px 4.5px at 40% 57%, #ffda66 80%, transparent 80%), radial-gradient(3px 3px at 30% 67%, #ffda66 80%, transparent 80%), radial-gradient(3px 3px at 30% 17%, #ffda66 80%, transparent 80%), radial-gradient(4.5px 4.5px at 40% 10%, #ffda66 80%, transparent 80%), radial-gradient(7.5px 7.5px at 62% 24%, #ffda66 80%, transparent 80%), radial-gradient(6px 6px at 18% 31%, #ffda66 80%, transparent 80%), radial-gradient(9px 9px at 83% 60%, #ffda66 80%, transparent 80%); |
| } |
| .beer-animation-wrapper .beer:after { |
| /*mug handle*/ |
| content: ''; |
| position: absolute; |
| border-radius: 0 50% 50% 0; |
| height: 75px; |
| width: 49.5px; |
| top: 22.5px; |
| right: -49.5px; |
| background-color: transparent; |
| box-sizing: border-box; |
| border: 12px solid #f1ecdb; |
| border-left: 9px solid #f1ecdb; |
| } |
| .beer-animation-wrapper .foam { |
| position: relative; |
| top: -20%; |
| left: 63%; |
| height: 15px; |
| width: 15px; |
| background: #fffef8; |
| border-radius: 25.5px; |
| box-shadow: -52.5px 42px 0 -2.25px #ffe799, -52.5px 43.5px 0 -2.25px #ffe799, -52.5px 45px 0 -2.25px #ffe799, -52.5px 46.5px 0 -2.25px #ffe799, -52.5px 48px 0 -2.25px #ffe799, -52.5px 49.5px 0 -2.25px #ffe799, -52.5px 51px 0 -2.25px #ffe799, -52.5px 52.5px 0 -2.25px #ffe799, -52.5px 54px 0 -2.25px #ffe799, -52.5px 55.5px 0 -2.25px #ffe799, -52.5px 57px 0 -2.25px #ffe799, -52.5px 58.5px 0 -2.25px #ffe799, -52.5px 60px 0 -2.25px #ffe799, -52.5px 61.5px 0 -2.25px #ffe799, -52.5px 63px 0 -2.25px #ffe799, -52.5px 64.5px 0 -2.25px #ffe799, -52.5px 66px 0 -2.25px #ffe799, -52.5px 67.5px 0 -2.25px #ffe799, -52.5px 69px 0 -2.25px #ffe799, -52.5px 70.5px 0 -2.25px #ffe799, -52.5px 72px 0 -2.25px #ffe799, -52.5px 73.5px 0 -2.25px #ffe799, -52.5px 75px 0 -2.25px #ffe799, -52.5px 76.5px 0 -2.25px #ffe799, -52.5px 78px 0 -2.25px #ffe799, -52.5px 79.5px 0 -2.25px #ffe799, -52.5px 81px 0 -2.25px #ffe799, -52.5px 82.5px 0 -2.25px #ffe799, -52.5px 84px 0 -2.25px #ffe799, -52.5px 85.5px 0 -2.25px #ffe799, -52.5px 87px 0 -2.25px #ffe799, -52.5px 88.5px 0 -2.25px #ffe799, -52.5px 90px 0 -2.25px #ffe799, -52.5px 91.5px 0 -2.25px #ffe799, -52.5px 93px 0 -2.25px #ffe799, -52.5px 94.5px 0 -2.25px #ffe799, -52.5px 96px 0 -2.25px #ffe799, -52.5px 97.5px 0 -2.25px #ffe799, -52.5px 99px 0 -2.25px #ffe799, -52.5px 100.5px 0 -2.25px #ffe799, -52.5px 102px 0 -2.25px #ffe799, -52.5px 103.5px 0 -2.25px #ffe799, -52.5px 105px 0 -2.25px #ffe799, -52.5px 106.5px 0 -2.25px #ffe799, -52.5px 108px 0 -2.25px #ffe799, -52.5px 109.5px 0 -2.25px #ffe799, 0 16.5px 0 10.5px #fff9de, 0 10.5px 0 10.5px #fffef8, -40.5px 10.5px 0 6px #fff9de, -58.5px 9px 0 9px #fffef8, -27px 18px 0 6px #fff9de, -75px 12px 0 6px #fff9de, -22.5px 0 0 9px #fffef8, 21px 10.5px 0 9px #fffef8, -48px -12px 0 7.5px #fffef8, -27px -21px 0 7.5px #fff9de, -7.5px -10.5px 0 7.5px #fff9de, 10.5px -7.5px 0 1.5px #fffef8, 13.5px -10.5px 0 1.5px #fff9de, 37.5px 10.5px 0 1.5px #fff9de; |
| } |
| .beer-animation-wrapper .foam:before, .beer-animation-wrapper .foam:after { |
| z-index: -1; |
| content: ''; |
| position: absolute; |
| top: 200%; |
| width: 15px; |
| border-radius: 25.5px; |
| background: #fff9de; |
| background: linear-gradient(to right, #fff9de 75%, #fffef8 75%); |
| } |
| .beer-animation-wrapper .foam:after { |
| left: 100%; |
| height: 0px; |
| -webkit-animation: drip1 2s ease-out forwards; |
| animation: drip1 2s ease-out forwards; |
| } |
| .beer-animation-wrapper .foam:before { |
| right: 25%; |
| height: 0px; |
| -webkit-animation: drip2 5s ease-out forwards; |
| animation: drip2 5s ease-out forwards; |
| } |
| |
| #popup-modal .modal-body { |
| background:url(https://i.imgur.com/f4wfsnL.jpg); |
| background-size:cover; |
| padding:0; |
| position:relative; |
| height:300px; |
| border-top-left-radius:6px; |
| border-top-right-radius:6px; |
| } |
| |
| #popup-modal h1 { |
| color:#fff; |
| margin:0; |
| padding-top:30px; |
| text-transform:uppercase; |
| letter-spacing:3px; |
| font-weight:100; |
| } |
| |
| #popup-modal h1 span { |
| color:#888; |
| font-weight:700; |
| } |
| |
| #popup-modal p { |
| color:#ccc; |
| font-weight:400; |
| } |
| |
| #popup-modal .modal-social { |
| /*position:absolute; |
| right: 65px; |
| top: 130px; |
| width: 215px;*/ |
| } |
| |
| #popup-modal .modal-box { |
| margin: auto; |
| position:absolute; |
| top: 40%; left: 15%; bottom: 50%; right: 15%; |
| z-index:9999; |
| } |
| |
| .overlay { |
| position: fixed; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: rgba(0, 0, 0, 0.7); |
| transition: opacity 500ms; |
| visibility: hidden; |
| opacity: 0; |
| } |
| .overlay:target { |
| visibility: visible; |
| opacity: 1; |
| } |
| |
| .popup { |
| margin: 70px auto; |
| padding: 20px; |
| background: #fff; |
| border-radius: 5px; |
| width: 30%; |
| position: relative; |
| transition: all 5s ease-in-out; |
| } |
| |
| .popup h2 { |
| margin-top: 0; |
| color: #333; |
| font-family: Tahoma, Arial, sans-serif; |
| } |
| .popup .close { |
| position: absolute; |
| top: 20px; |
| right: 30px; |
| transition: all 200ms; |
| font-size: 30px; |
| font-weight: bold; |
| text-decoration: none; |
| color: #333; |
| } |
| .popup .close:hover { |
| color: #06D85F; |
| } |
| .popup .content { |
| max-height: 30%; |
| overflow: auto; |
| } |
| |
| @media screen and (max-width: 700px){ |
| .box{ |
| width: 70%; |
| } |
| .popup{ |
| width: 70%; |
| } |
| } |
| |
| /********Grid Widht *******/ |
| .grid-3 { width: 25%; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px; |
| position: relative;} |
| /********Grid Widht *******/ |
| |
| |
| |
| |
| /***Section Css******/ |
| .counting { |
| /* background: #34495e none repeat scroll 0 0; */ |
| color: #fff; |
| overflow: hidden; |
| padding: 36px 0; |
| } |
| |
| .counting span { |
| font-size: 70px; |
| font-weight: 700; |
| position: relative; |
| text-align:center; |
| display:block; |
| } |
| .counting p { |
| font-size: 20px; |
| font-weight: 700; |
| letter-spacing: 2px; |
| padding-top: 30px; |
| text-transform: uppercase; |
| text-align:center; |
| } |
| |
| .counting span::before { |
| /*background: #b7b7b7 none repeat scroll 0 0; */ |
| bottom: -10px; |
| content: " "; |
| height: 4px; |
| left: 32%; |
| position: absolute; |
| width: 36%; |
| } |
| |
| |
| @media (max-width:980px) { |
| .layout { width: 767px; } |
| .grid-3 { width: 50%; } |
| } |
| @media (max-width:640px) { |
| .layout { width: 300px; } |
| .grid-3 { width: 100%; } |
| |
| |
| } |
| |
| @-webkit-keyframes drip2 { |
| 0% { |
| height: 0px; |
| } |
| 50% { |
| height: 45px; |
| } |
| 75% { |
| height: 45px; |
| } |
| 80% { |
| height: 45px; |
| } |
| 100% { |
| height: 52.5px; |
| } |
| } |
| |
| @keyframes drip2 { |
| 0% { |
| height: 0px; |
| } |
| 50% { |
| height: 45px; |
| } |
| 75% { |
| height: 45px; |
| } |
| 80% { |
| height: 45px; |
| } |
| 100% { |
| height: 52.5px; |
| } |
| } |
| @-webkit-keyframes drip1 { |
| 0% { |
| height: 0px; |
| } |
| 100% { |
| height: 75px; |
| } |
| } |
| @keyframes drip1 { |
| 0% { |
| height: 0px; |
| } |
| 100% { |
| height: 75px; |
| } |
| } |
| @-webkit-keyframes bubbles { |
| 0% { |
| -webkit-transform: translatey(0%); |
| transform: translatey(0%); |
| } |
| 99% { |
| -webkit-transform: translatey(-50%); |
| transform: translatey(-50%); |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| @keyframes bubbles { |
| 0% { |
| -webkit-transform: translatey(0%); |
| transform: translatey(0%); |
| } |
| 99% { |
| -webkit-transform: translatey(-50%); |
| transform: translatey(-50%); |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| /* Anim |
| width: 378px; |
| height: 290px; |
| */ |
| .animation { |
| display: inline-block; |
| position: relative; |
| width: 46em; |
| height: 30em; |
| margin: -2vh auto 0 auto; |
| vertical-align: middle; |
| } |
| @media (max-width:720px) { |
| .animation {margin-left:-30rem;margin-right:-30rem;} |
| } |
| @media (max-width:450px) { |
| .animation {width:58rem;height:38rem;} |
| } |
| @media (max-width:450px) { |
| .animation {width:58rem;height:38rem;} |
| } |
| @media (max-width:400px) { |
| .animation {width:55rem;height:36rem;} |
| } |
| @media (max-width:380px) { |
| .animation {width:50rem;height:33rem;} |
| } |
| @media (max-width:340px) { |
| .animation {width:47rem;height:31rem;} |
| } |
| @media (max-width:320px) { |
| .animation {width:42rem;height:28rem;} |
| } |
| @media (max-height:650px) { |
| .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;} |
| } |
| @media (min-height:651px) { |
| .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;} |
| } |
| @media (min-height:670px) { |
| .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;} |
| } |
| @media (min-height:720px) { |
| .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible} |
| } |
| @media (min-height:800px) { |
| .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible} |
| } |
| .animation .device { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| left: 50%; |
| top: 50%; |
| background: #111; |
| -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| -moz-transform: translate(-50%, -50%); |
| -ms-transform: translate(-50%, -50%); |
| -webkit-transform: translate(-50%, -50%); |
| transform: translate(-50%, -50%); |
| } |
| .animation .device .phone-home-button, |
| .animation .device .tablet-home-button { |
| position: absolute; |
| border-radius: 50%; |
| background: #444; |
| opacity: 0; |
| z-index: 1; |
| -webkit-transition: all 0.4s ease; |
| -moz-transition: all 0.4s ease; |
| -ms-transition: all 0.4s ease; |
| transition: all 0.4s ease; |
| } |
| .animation .device .phone-home-button { |
| width: 16px; |
| height: 16px; |
| margin-top: -8px; |
| right: 11px; |
| top: 50%; |
| } |
| .animation .device .tablet-home-button { |
| width: 12px; |
| height: 12px; |
| margin-left: -6px; |
| bottom: 7px; |
| left: 50%; |
| } |
| .animation .device .screen-stand { |
| position: absolute; |
| width: 100%; |
| margin-left: -10px; |
| margin-top: -1px; |
| top: 60%; |
| opacity: 0; |
| z-index: 1; |
| -webkit-transition: all 0.4s ease-out; |
| -moz-transition: all 0.4s ease-out; |
| -ms-transition: all 0.4s ease-out; |
| transition: all 0.4s ease-out; |
| } |
| .animation .device .screen-stand .leg { |
| position: absolute; |
| width: 12px; |
| height: 16px; |
| left: 50%; |
| top: 0; |
| margin-left: -6px; |
| background: #111; |
| } |
| .animation .device .screen-stand .foot { |
| position: absolute; |
| width: 120px; |
| height: 4px; |
| left: 50%; |
| top: 15px; |
| margin-left: -60px; |
| border-top-left-radius: 2px; |
| border-top-right-radius: 2px; |
| background: #111; |
| } |
| .animation .device .display { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| background: #34495e; |
| z-index: 3; |
| } |
| .animation .device .display div { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| left: 100%; |
| white-space: nowrap; |
| -webkit-transition: all 0.4s ease; |
| -moz-transition: all 0.4s ease; |
| -ms-transition: all 0.4s ease; |
| transition: all 0.4s ease; |
| } |
| .animation .device .display div div { |
| position: absolute; |
| width: 100%; |
| left: 0; |
| top: 50%; |
| margin-top: -14px; |
| font-size: 20px; |
| text-align: center; |
| /* color: #0080ff;*/ |
| } |
| @media (max-width:450px) { |
| .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;} |
| } |
| .animation .device .display .slide1 div {margin-top:0px;} |
| .animation .device .display div div em { |
| font-weight: bold; |
| } |
| .animation .device .display .slide1 { |
| /* background: #000; */ |
| background: url("https://i.imgur.com/wCp0xpe.jpg"); |
| background-size: cover; |
| background-repeat: no-repeat; |
| background-position: center center; |
| text-shadow: 1px 1px 2px #1f1f1f, -1px -1px 2px #1f1f1f, -1px 0 2px #1f1f1f, 0 -1px 2px #1f1f1f, 1px 0 2px #1f1f1f, 0 1px 2px #1f1f1f, 1px -1px 2px #1f1f1f, -1px 1px 2px #1f1f1f, |
| 2px 2px 2px #1f1f1f, -2px -2px 2px #1f1f1f, -2px 0 2px #1f1f1f, 0 -2px 2px #1f1f1f, 2px 0 2px #1f1f1f, 0 2px 2px #1f1f1f, 2px -2px 2px #1f1f1f, -2px 2px 2px #1f1f1f, |
| 3px 3px 2px #1f1f1f, -3px -3px 2px #1f1f1f, -3px 0 2px #1f1f1f, 0 -3px 2px #1f1f1f, 3px 0 2px #1f1f1f, 0 3px 2px #1f1f1f, 3px -3px 2px #1f1f1f, -3px 3px 2px #1f1f1f, |
| 4px 4px 4px #1f1f1f, -4px -4px 4px #1f1f1f, -4px 0 4px #1f1f1f, 0 -4px 4px #1f1f1f, 4px 0 4px #1f1f1f, 0 4px 4px #1f1f1f, 4px -4px 4px #1f1f1f, -4px 4px 4px #1f1f1f; |
| color:white; |
| } |
| .animation .device .display .slide2 { |
| /* background: #000; */ |
| background: url("https://i.imgur.com/KfArkPZ.jpg"); |
| background-size: cover; |
| background-repeat: no-repeat; |
| background-position: center center; |
| text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, 0 1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, |
| 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff, 0 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff, |
| 3px 3px 2px #fff, -3px -3px 2px #fff, -3px 0 2px #fff, 0 -3px 2px #fff, 3px 0 2px #fff, 0 3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff, |
| 4px 4px 4px #fff, -4px -4px 4px #fff, -4px 0 4px #fff, 0 -4px 4px #fff, 4px 0 4px #fff, 0 4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff; |
| color:#0080ff; |
| } |
| .animation .device .display .slide3 { |
| /* background: #000; */ |
| background: url("https://i.imgur.com/c55mey7.jpg"); |
| background-size: cover; |
| background-repeat: no-repeat; |
| background-position: center center; |
| text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, -1px 0 2px #000, 0 -1px 2px #000, 1px 0 2px #000, 0 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, |
| 2px 2px 2px #000, -2px -2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000, 2px 0 2px #000, 0 2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000, |
| 3px 3px 2px #000, -3px -3px 2px #000, -3px 0 2px #000, 0 -3px 2px #000, 3px 0 2px #000, 0 3px 2px #000, 3px -3px 2px #000, -3px 3px 2px #000, |
| 4px 4px 4px #000, -4px -4px 4px #000, -4px 0 4px #000, 0 -4px 4px #000, 4px 0 4px #000, 0 4px 4px #000, 4px -4px 4px #000, -4px 4px 4px #000; |
| color:white; |
| } |
| .animation[data-animation-step="1"] .device { |
| width: 87%; |
| height: 90%; |
| padding: 10px; |
| border-radius: 4px; |
| } |
| .animation[data-animation-step="1"] .device .slide1 { |
| left: 0%; |
| } |
| .animation[data-animation-step="1"] .device .screen-stand { |
| opacity: 1; |
| top: 100%; |
| } |
| .animation[data-animation-step="2"] .device { |
| width: 74%; |
| height: 75%; |
| padding: 16px; |
| border-radius: 10px; |
| } |
| .animation[data-animation-step="2"] .device .slide1 { |
| left: -100%; |
| } |
| .animation[data-animation-step="2"] .device .slide2 { |
| left: 0%; |
| } |
| .animation[data-animation-step="2"] .device .tablet-home-button { |
| opacity: 1; |
| } |
| .animation[data-animation-step="3"] .device { |
| width: 27%; |
| height: 75%; |
| padding: 16px 4px; |
| border-radius: 6px; |
| } |
| .animation[data-animation-step="3"] .device .slide1, |
| .animation[data-animation-step="3"] .device .slide2 { |
| left: -100%; |
| } |
| .animation[data-animation-step="3"] .device .slide3 { |
| left: 0%; |
| } |
| .animation[data-animation-step="3"] .device .phone-home-button { |
| opacity: 1; |
| } |
| @media (min-height:800px) { |
| .animation[data-animation-step="1"] .device {width:87%; height:90%;} |
| .animation[data-animation-step="2"] .device {width:80%; height:80%;} |
| .animation[data-animation-step="3"] .device {width:28%; height:80%;} |
| } |
| @media (max-height:720px) { |
| .animation[data-animation-step="1"] .device {width:72%; height:75%;} |
| .animation[data-animation-step="2"] .device {width:59%; height:60%;} |
| .animation[data-animation-step="3"] .device {width:22%; height:63%;} |
| .animation .device .display div div {font-size:16px;} |
| } |
| @media (max-height:650px) { |
| .animation[data-animation-step="1"] .device {width:62%; height:65%;} |
| .animation[data-animation-step="2"] .device {width:54%; height:55%;} |
| .animation[data-animation-step="3"] .device {width:22%; height:63%;} |
| .animation .device .display div div {font-size:15px;} |
| } |
| @media (max-width:560px) { |
| .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;} |
| .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;} |
| .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;} |
| .animation .device .display div div {font-size:15px;} |
| } |
| @media (max-width:520px) { |
| .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;} |
| .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;} |
| .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;} |
| .animation .device .display div div {font-size:15px;} |
| } |
| @media (max-width:460px) { |
| .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;} |
| .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;} |
| .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;} |
| .animation .device .display div div {font-size:15px;} |
| } |
| @media (max-width:350px) { |
| .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;} |
| .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;} |
| .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;} |
| .animation .device .display div div {font-size:15px;} |
| } |
| @media (max-width:320px) { |
| .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;} |
| .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;} |
| .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;} |
| .animation .device .display div div {font-size:15px;} |
| } |
| |
| .glow { |
| font-size: 80px; |
| color: #fff; |
| text-align: center; |
| -webkit-animation: glow 1s ease-in-out infinite alternate; |
| -moz-animation: glow 1s ease-in-out infinite alternate; |
| animation: glow 1s ease-in-out infinite alternate; |
| } |
| |
| @-webkit-keyframes glow { |
| from { |
| text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0095e6, 0 0 40px #0095e6, 0 0 50px #0095e6, 0 0 60px #0095e6, 0 0 70px #0095e6; |
| } |
| to { |
| text-shadow: 0 0 20px #fff, 0 0 30px #4db1ff, 0 0 40px #4db1ff, 0 0 50px #4db1ff, 0 0 60px #4db1ff, 0 0 70px #4db1ff, 0 0 80px #4db1ff; |
| } |
| } |
| |