Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
CSS_ZenGarden/NEWstyle.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1196 lines (1083 sloc)
27.6 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*move menues....decrease white space.*/ | |
| @import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300); | |
| @import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,100italic,300italic,400italic,700,700italic,900,900italic); | |
| * { | |
| box-sizing: border-box; | |
| background-clip: padding-box; | |
| } | |
| *:hover{ | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| body { | |
| font-family: roboto; | |
| margin: 0; | |
| background-color: #EDEFE6; | |
| max-width: 100%; | |
| overflow-x: hidden; | |
| } | |
| p, | |
| a { | |
| font-family: Lato; | |
| font-weight: 100; | |
| font-size: 4vw; | |
| text-align: justify; | |
| } | |
| a { | |
| display: inline-block; | |
| position: relative; | |
| color: black; | |
| font-weight: 500; | |
| text-decoration: none; | |
| } | |
| a:before { | |
| content: ""; | |
| position: absolute; | |
| width: 100%; | |
| height: 1px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #000; | |
| visibility: hidden; | |
| -webkit-transform: scaleX(0); | |
| transform: scaleX(0); | |
| -webkit-transition: all 0.3s ease-in-out 0s; | |
| transition: all 0.3s ease-in-out 0s; | |
| } | |
| a:hover:before { | |
| visibility: visible; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| header { | |
| height: 23vw; | |
| max-height: 10rem; | |
| margin-top: 6vw; | |
| background: rgba(0, 174, 239, 0.75); | |
| padding: 0rem; | |
| width: 100%; | |
| z-index: 1; | |
| -webkit-animation: headerANI 5s linear 0s infinite alternate; | |
| animation: headerANI 5s linear 0s infinite alternate; | |
| } | |
| @-webkit-keyframes headerANI{ | |
| from{ | |
| } | |
| to{ | |
| -webkit-transform: translateY(.5rem); | |
| transform: translateY(.5rem); | |
| } | |
| } | |
| @keyframes headerANI{ | |
| from{ | |
| } | |
| to{ | |
| -webkit-transform: translateY(.5rem); | |
| transform: translateY(.5rem); | |
| } | |
| } | |
| @-webkit-keyframes ANTIheaderANI{ | |
| from{ | |
| } | |
| to{ | |
| -webkit-transform: translateY(-.5rem); | |
| transform: translateY(-.5rem); | |
| } | |
| } | |
| @keyframes ANTIheaderANI{ | |
| from{ | |
| } | |
| to{ | |
| -webkit-transform: translateY(-.5rem); | |
| transform: translateY(-.5rem); | |
| } | |
| } | |
| @-webkit-keyframes ANTIheaderANI2{ | |
| from{ | |
| } | |
| to{ | |
| -webkit-transform:rotate(90deg) translate(-.5rem, 0); | |
| transform:rotate(90deg) translate(-.5rem, 0); | |
| } | |
| } | |
| @keyframes ANTIheaderANI2{ | |
| from{ | |
| } | |
| to{ | |
| -webkit-transform:rotate(90deg) translate(-.5rem, 0); | |
| transform:rotate(90deg) translate(-.5rem, 0); | |
| } | |
| } | |
| h1 { | |
| font-size: 12vw; | |
| font-family: oswald; | |
| font-weight: 900; | |
| margin: 0; | |
| -webkit-transform: translate(0vw, -6vw); | |
| transform: translate(0vw, -6vw); | |
| -moz-text-align-last: center; | |
| text-align-last: center; | |
| text-transform: uppercase; | |
| /* animation: ANTIheaderANI 5s linear 0s infinite alternate;*/ | |
| } | |
| .intro { | |
| margin: 0; | |
| padding: 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| max-width: 100%; | |
| } | |
| h2 { | |
| -webkit-animation: ANTIheaderANI2 5s linear 0s infinite alternatgit git e; | |
| animation: ANTIheaderANI2 5s linear 0s infinite alternate; | |
| font-size: 8vw; | |
| font-family: oswald; | |
| font-weight: 900; | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| -webkit-transform-origin: left; | |
| transform-origin: left; | |
| white-space: nowrap; | |
| margin-left: 16vw; | |
| margin-top: -9.65vw; | |
| } | |
| .summary { | |
| -webkit-align-self: center; | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| width: 72vw; | |
| max-width: 28rem; | |
| height: 72vw; | |
| max-height: 28rem; | |
| background: rgba(236, 0, 140, 0.75); | |
| padding: 1rem; | |
| border-radius: 50vw; | |
| margin-bottom: 5rem; | |
| margin-top: -4vw; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-animation: summaryANI 5s linear .1s infinite alternate; | |
| animation: summaryANI 5s linear .1s infinite alternate; | |
| } | |
| @-webkit-keyframes summaryANI{ | |
| 0%{ | |
| -webkit-transform: translate(.5rem, .25rem); | |
| transform: translate(.5rem, .25rem); | |
| } | |
| 100%{ | |
| -webkit-transform: translate(-.5rem, -.25rem); | |
| transform: translate(-.5rem, -.25rem); | |
| } | |
| } | |
| @keyframes summaryANI{ | |
| 0%{ | |
| -webkit-transform: translate(.5rem, .25rem); | |
| transform: translate(.5rem, .25rem); | |
| } | |
| 100%{ | |
| -webkit-transform: translate(-.5rem, -.25rem); | |
| transform: translate(-.5rem, -.25rem); | |
| } | |
| } | |
| /* | |
| @keyframes ANTIsummaryANI{ | |
| 0%{ | |
| transform: translate(-.5rem, -.25rem); | |
| } | |
| 100%{ | |
| transform: translate(.5rem, .25rem); | |
| } | |
| } | |
| */ | |
| .summary p { | |
| font-family: Lato; | |
| font-weight: 4; | |
| width: 62%; | |
| /* animation: ANTIsummaryANI 5s linear .1s infinite alternate;*/ | |
| } | |
| .summary:hover { | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| h3 { | |
| font-family: oswald; | |
| font-size: 8vw; | |
| } | |
| .preamble { | |
| background: rgba(255, 255, 0, 0.75); | |
| padding: 1rem; | |
| width: 90vw; | |
| max-width: 37rem; | |
| margin-top: -25vw; | |
| padding: 5vw; | |
| padding-top: 24vw; | |
| -webkit-align-self: flex-end; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| z-index: -1; | |
| padding-bottom: 21vw; | |
| -webkit-animation: preambleANI 4s linear .08s infinite alternate; | |
| animation: preambleANI 4s linear .08s infinite alternate; | |
| } | |
| .preamble:hover { | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| @-webkit-keyframes preambleANI{ | |
| from{ | |
| -webkit-transform: translate(.55rem, .1rem); | |
| transform: translate(.55rem, .1rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(-.5rem, -.2rem); | |
| transform: translate(-.5rem, -.2rem); | |
| } | |
| } | |
| @keyframes preambleANI{ | |
| from{ | |
| -webkit-transform: translate(.55rem, .1rem); | |
| transform: translate(.55rem, .1rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(-.5rem, -.2rem); | |
| transform: translate(-.5rem, -.2rem); | |
| } | |
| } | |
| /* | |
| @keyframes ANTIpreambleANI{ | |
| from{ | |
| transform: translate(-.25rem, -.1rem); | |
| } | |
| to{ | |
| transform: translate(.5rem, .2rem); | |
| } | |
| } | |
| */ | |
| .preamble h3 { | |
| margin-top: -1.6rem; | |
| margin-left: -8vw; | |
| /* animation: ANTIpreambleANI 5s linear .0s infinite alternate;*/ | |
| } | |
| /* animation: ANTIpreambleANI 5s linear .0s infinite alternate;*/ | |
| div.main { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| @-webkit-keyframes explanationANI{ | |
| from{ | |
| -webkit-transform: translate(.25rem, -.25rem); | |
| transform: translate(.25rem, -.25rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(-.55rem, .1rem); | |
| transform: translate(-.55rem, .1rem); | |
| } | |
| } | |
| @keyframes explanationANI{ | |
| from{ | |
| -webkit-transform: translate(.25rem, -.25rem); | |
| transform: translate(.25rem, -.25rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(-.55rem, .1rem); | |
| transform: translate(-.55rem, .1rem); | |
| } | |
| } | |
| .explanation { | |
| -webkit-animation: explanationANI 5s linear .0s infinite alternate; | |
| animation: explanationANI 5s linear .0s infinite alternate; | |
| margin-top: -11vw; | |
| padding: 1rem; | |
| width: 85vw; | |
| max-width: 36rem; | |
| background: rgba(0, 174, 239, 0.75); | |
| } | |
| .explanation:hover{ | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .explanation h3 { | |
| -webkit-transform: rotate(90deg) translate(-24vw, -80vw); | |
| transform: rotate(90deg) translate(-24vw, -80vw); | |
| -webkit-transform-origin: left; | |
| transform-origin: left; | |
| } | |
| .explanation p { | |
| -webkit-transform: translate(.1rem, -25vw); | |
| transform: translate(.1rem, -25vw); | |
| width: 90%; | |
| } | |
| .explanation p:nth-child(3) { | |
| margin-bottom: -19vw; | |
| } | |
| @-webkit-keyframes participationANI{ | |
| from{ | |
| -webkit-transform: translate(.45rem, .5rem); | |
| transform: translate(.45rem, .5rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(-.35rem, .17rem); | |
| transform: translate(-.35rem, .17rem); | |
| } | |
| } | |
| @keyframes participationANI{ | |
| from{ | |
| -webkit-transform: translate(.45rem, .5rem); | |
| transform: translate(.45rem, .5rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(-.35rem, .17rem); | |
| transform: translate(-.35rem, .17rem); | |
| } | |
| } | |
| .participation { | |
| -webkit-animation: participationANI 4s linear .08s infinite alternate; | |
| animation: participationANI 4s linear .08s infinite alternate; | |
| z-index: 1; | |
| background: rgba(236, 0, 140, 0.75); | |
| padding: 5vw; | |
| margin-top: -4vw; | |
| width: 90vw; | |
| max-width: 38rem; | |
| -webkit-align-self: flex-end; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| } | |
| .participation:hover { | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .participation h3 { | |
| margin-top: -11vw; | |
| margin-left: -6vw; | |
| } | |
| .participation p { | |
| -webkit-transform: translate(-1vw, -5vw); | |
| transform: translate(-1vw, -5vw); | |
| width: 88%; | |
| } | |
| @-webkit-keyframes benefitsANI{ | |
| from{ | |
| -webkit-transform: translate(-.3rem, .4rem); | |
| transform: translate(-.3rem, .4rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(2rem, -.5rem); | |
| transform: translate(2rem, -.5rem); | |
| } | |
| } | |
| @keyframes benefitsANI{ | |
| from{ | |
| -webkit-transform: translate(-.3rem, .4rem); | |
| transform: translate(-.3rem, .4rem); | |
| } | |
| to{ | |
| -webkit-transform: translate(2rem, -.5rem); | |
| transform: translate(2rem, -.5rem); | |
| } | |
| } | |
| .benefits { | |
| -webkit-animation: benefitsANI 4s linear .08s infinite alternate; | |
| animation: benefitsANI 4s linear .08s infinite alternate; | |
| background: rgba(255, 255, 0, 0.75); | |
| padding: 1rem; | |
| width: 85vw; | |
| max-width: 34rem; | |
| height: 85vw; | |
| max-height: 34rem; | |
| border-radius: 90vw; | |
| margin-left: -18vw; | |
| margin-right: auto; | |
| margin-top: -9vw; | |
| z-index: 1; | |
| } | |
| .benefits:hover{ | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .benefits h3 { | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| -webkit-transform-origin: left; | |
| transform-origin: left; | |
| margin-left: 80vw; | |
| margin-top: 12vw; | |
| } | |
| .benefits p { | |
| width: 60%; | |
| margin: auto; | |
| margin-top: -20vw; | |
| margin-right: 12.2vw; | |
| } | |
| @-webkit-keyframes requirementsANI{ | |
| from{ | |
| /* transform: translate(-.3rem, .4rem);*/ | |
| } | |
| to{ | |
| -webkit-transform: translate(-.1rem, 1rem); | |
| transform: translate(-.1rem, 1rem); | |
| } | |
| } | |
| @keyframes requirementsANI{ | |
| from{ | |
| /* transform: translate(-.3rem, .4rem);*/ | |
| } | |
| to{ | |
| -webkit-transform: translate(-.1rem, 1rem); | |
| transform: translate(-.1rem, 1rem); | |
| } | |
| } | |
| .requirements { | |
| z-index: 2; | |
| -webkit-animation: requirementsANI 4s linear .08s infinite alternate; | |
| animation: requirementsANI 4s linear .08s infinite alternate; | |
| position: relative; | |
| background: rgba(0, 174, 239, 0.75); | |
| padding: 0 5vw; | |
| width: 91vw; | |
| max-width: 45rem; | |
| margin-top: -10vw; | |
| -webkit-align-self: flex-end; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| } | |
| .requirements:hover{ | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .requirements h3 { | |
| position: absolute; | |
| -webkit-transform: rotate(90deg) translate(0vw, 5vw); | |
| transform: rotate(90deg) translate(0vw, 5vw); | |
| -webkit-transform-origin: left; | |
| transform-origin: left; | |
| } | |
| @-webkit-keyframes footerANI{ | |
| from{ | |
| /* transform: translate(-.3rem, .4rem);*/ | |
| } | |
| to{ | |
| -webkit-transform: translate(1rem, .03rem); | |
| transform: translate(1rem, .03rem); | |
| } | |
| } | |
| @keyframes footerANI{ | |
| from{ | |
| /* transform: translate(-.3rem, .4rem);*/ | |
| } | |
| to{ | |
| -webkit-transform: translate(1rem, .03rem); | |
| transform: translate(1rem, .03rem); | |
| } | |
| } | |
| footer { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| width: 100%; | |
| margin: 8vw 0; | |
| padding: 0; | |
| -webkit-perspective: 800px; | |
| perspective: 800px; | |
| } | |
| footer a { | |
| text-align: center; | |
| line-height: 23vw; | |
| width: 23vw; | |
| height: 23vw; | |
| border-radius: 25vw; | |
| margin-right: -5vw; | |
| -webkit-animation: footerANI 2s linear 0s infinite alternate; | |
| animation: footerANI 2s linear 0s infinite alternate; | |
| -webkit-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| /* transition: transform .1s;*/ | |
| } | |
| footer a:hover:before { | |
| display: none; | |
| } | |
| footer a:nth-child(1) { | |
| background: rgba(236, 0, 140, 0.75); | |
| background-image: url(html5.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| color: rgba(240, 230, 140, 0); | |
| background-size: 10vw; | |
| -webkit-animation-delay: 0s; | |
| animation-delay: 0s; | |
| } | |
| footer a:nth-child(5) { | |
| background: rgba(236, 0, 140, 0.75); | |
| background-image: url(github.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| color: rgba(240, 230, 140, 0); | |
| background-size: 10vw; | |
| -webkit-animation-delay: 4s; | |
| animation-delay: 4s; | |
| } | |
| footer a:nth-child(2) { | |
| background: rgba(0, 174, 239, 0.75); | |
| background-image: url(css.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| color: rgba(240, 230, 140, 0); | |
| background-size: 10vw; | |
| -webkit-animation-delay: 1s; | |
| animation-delay: 1s; | |
| } | |
| footer a:nth-child(4) { | |
| background: rgba(0, 174, 239, 0.75); | |
| background-image: url(acces.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| color: rgba(240, 230, 140, 0); | |
| background-size: 10vw; | |
| -webkit-animation-delay: 3s; | |
| animation-delay: 3s; | |
| } | |
| footer a:nth-child(3) { | |
| background: rgba(255, 255, 0, 0.75); | |
| background-image: url(cc.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| color: rgba(240, 230, 140, 0); | |
| background-size: 10vw; | |
| -webkit-animation-delay: 2s; | |
| animation-delay: 2s; | |
| } | |
| aside .wrapper { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| footer > a:hover{ | |
| -webkit-animation-delay: 0s; | |
| animation-delay: 0s; | |
| z-index: 10; | |
| -webkit-animation: select .25s cubic-bezier(.08,.84,.85,.66); | |
| animation: select .25s cubic-bezier(.08,.84,.85,.66); | |
| /* animation-play-state: paused;*/ | |
| } | |
| @-webkit-keyframes select{ | |
| 0%{ | |
| -webkit-transform: rotateY(0deg) | |
| translateY(0rem); | |
| transform: rotateY(0deg) | |
| translateY(0rem); | |
| } | |
| 30%{ | |
| -webkit-transform: translateY(-1rem); | |
| transform: translateY(-1rem); | |
| } | |
| 40%{ | |
| -webkit-transform: rotateY(360deg) | |
| translateY(-1rem); | |
| transform: rotateY(360deg) | |
| translateY(-1rem); | |
| } | |
| 100%{ | |
| -webkit-transform: rotateY(0deg) | |
| translateY(-1rem); | |
| transform: rotateY(0deg) | |
| translateY(-1rem); | |
| } | |
| } | |
| @keyframes select{ | |
| 0%{ | |
| -webkit-transform: rotateY(0deg) | |
| translateY(0rem); | |
| transform: rotateY(0deg) | |
| translateY(0rem); | |
| } | |
| 30%{ | |
| -webkit-transform: translateY(-1rem); | |
| transform: translateY(-1rem); | |
| } | |
| 40%{ | |
| -webkit-transform: rotateY(360deg) | |
| translateY(-1rem); | |
| transform: rotateY(360deg) | |
| translateY(-1rem); | |
| } | |
| 100%{ | |
| -webkit-transform: rotateY(0deg) | |
| translateY(-1rem); | |
| transform: rotateY(0deg) | |
| translateY(-1rem); | |
| } | |
| } | |
| aside h3 { | |
| margin: 0; | |
| padding: 1rem 0rem; | |
| } | |
| div.design-selection { | |
| background: rgba(236, 0, 140, 0.75); | |
| width: 90vw; | |
| max-width: 33rem; | |
| padding: 3vw; | |
| position: relative; | |
| padding-top: 7vw; | |
| -webkit-animation: designsANI 20s linear 0s infinite alternate; | |
| animation: designsANI 20s linear 0s infinite alternate; | |
| } | |
| @-webkit-keyframes designsANI{ | |
| 0%{ | |
| -webkit-transform: translate(0rem, 0rem); | |
| transform: translate(0rem, 0rem); | |
| } | |
| 33%{ | |
| -webkit-transform:translate(0rem, 1rem); | |
| transform:translate(0rem, 1rem); | |
| } | |
| 66%{ | |
| -webkit-transform: translate(1rem, 1rem); | |
| transform: translate(1rem, 1rem) | |
| } | |
| 100%{ | |
| -webkit-transform: translate(1rem, 0rem); | |
| transform: translate(1rem, 0rem) | |
| } | |
| } | |
| @keyframes designsANI{ | |
| 0%{ | |
| -webkit-transform: translate(0rem, 0rem); | |
| transform: translate(0rem, 0rem); | |
| } | |
| 33%{ | |
| -webkit-transform:translate(0rem, 1rem); | |
| transform:translate(0rem, 1rem); | |
| } | |
| 66%{ | |
| -webkit-transform: translate(1rem, 1rem); | |
| transform: translate(1rem, 1rem) | |
| } | |
| 100%{ | |
| -webkit-transform: translate(1rem, 0rem); | |
| transform: translate(1rem, 0rem) | |
| } | |
| } | |
| div.design-selection h3 { | |
| position: absolute; | |
| margin-top: -17vw; | |
| margin-left: 5vw; | |
| white-space: nowrap; | |
| } | |
| div.design-selection ul { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| } | |
| div.design-selection ul li { | |
| line-height: 7vw; | |
| visibility: hidden; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| div.design-selection ul li a { | |
| visibility: visible; | |
| } | |
| .design-archives nav { | |
| max-width: 33rem; | |
| margin: 5vw; | |
| margin-top: -2vw; | |
| background: rgba(0, 174, 239, 0.75); | |
| -webkit-animation: designsANI 20s linear 0s infinite alternate; | |
| animation: designsANI 20s linear 0s infinite alternate; | |
| } | |
| .design-archives nav ul { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -webkit-flex-direction: row-reverse; | |
| -ms-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| -webkit-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| } | |
| h3.archives { | |
| display: none; | |
| } | |
| .design-archives nav ul li { | |
| padding: 3vw; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| white-space: nowrap; | |
| } | |
| .design-archives nav ul li:nth-child(1) { | |
| margin-right: 0; | |
| } | |
| aside ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .resources { | |
| display: none; | |
| } | |
| .zen-resources ul { | |
| top: 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| .zen-resources ul li { | |
| width: 50vw; | |
| max-width: 16rem; | |
| height: 50vw; | |
| max-height: 16rem; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| border-radius: 50vw; | |
| margin-bottom: -9vw; | |
| background: rgba(236, 0, 140, 0.75); | |
| -webkit-animation: footerANI 2s linear 0s infinite alternate; | |
| animation: footerANI 2s linear 0s infinite alternate; | |
| } | |
| .zen-resources ul li:nth-child(1), | |
| .zen-resources ul li:nth-child(5) { | |
| background: rgba(0, 174, 239, 0.75); | |
| -webkit-animation-delay: 1s; | |
| animation-delay: 1s; | |
| } | |
| .zen-resources ul li:nth-child(2), | |
| .zen-resources ul li:nth-child(4) { | |
| background: rgba(255, 255, 0, 0.75); | |
| -webkit-animation-delay: 2s; | |
| animation-delay: 2s; | |
| } | |
| @media (min-width: 627.5px) { | |
| h1 { | |
| font-size: 5.5rem; | |
| } | |
| h2, | |
| h3 { | |
| font-size: 3.2rem; | |
| } | |
| p, | |
| a { | |
| font-size: 1.5rem; | |
| } | |
| .zen-resources ul { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| .explanation { | |
| margin-top: -4rem; | |
| padding: 2rem; | |
| } | |
| .explanation h3 { | |
| -webkit-transform: rotate(90deg) translate(-10rem, -34rem); | |
| transform: rotate(90deg) translate(-10rem, -34rem); | |
| } | |
| .explanation p { | |
| -webkit-transform: translate(.1rem, -12rem); | |
| transform: translate(.1rem, -12rem); | |
| } | |
| .explanation p:nth-child(3) { | |
| margin-bottom: -9rem; | |
| } | |
| .benefits { | |
| margin-left: -4rem; | |
| margin-top: -11vw; | |
| } | |
| .benefits h3 { | |
| margin-left: 30rem; | |
| margin-top: 1rem; | |
| } | |
| .benefits p { | |
| margin-top: -4.75rem; | |
| margin-right: 6rem; | |
| } | |
| div.design-selection { | |
| padding: 2rem; | |
| padding-top: 3rem; | |
| } | |
| div.design-selection h3 { | |
| margin-top: -6.5rem; | |
| margin-left: 2rem; | |
| } | |
| div.design-selection ul li { | |
| line-height: 3rem; | |
| } | |
| .design-archives nav { | |
| max-width: 33rem; | |
| margin-top: -1rem; | |
| background: rgba(0, 174, 239, 0.75); | |
| } | |
| footer { | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| footer a { | |
| width: 9rem; | |
| height: 9rem; | |
| border-radius: 9rem; | |
| margin-right: -2rem; | |
| } | |
| footer a:nth-child(1) { | |
| background-size: 5rem; | |
| } | |
| footer a:nth-child(5) { | |
| background-size: 5rem; | |
| } | |
| footer a:nth-child(2) { | |
| background-size: 5rem; | |
| } | |
| footer a:nth-child(4) { | |
| background-size: 5rem; | |
| } | |
| footer a:nth-child(3) { | |
| background-size: 5rem; | |
| } | |
| } | |
| @media (min-width:725px) { | |
| h2 { | |
| margin-left: 4rem; | |
| margin-top: -4rem; | |
| } | |
| .summary { | |
| -webkit-align-self: flex-start; | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; | |
| margin-bottom: 5rem; | |
| margin-top: -4vw; | |
| } | |
| } | |
| @media (min-width: 949px) { | |
| .preamble { | |
| margin-top: -10rem; | |
| padding-top: 5rem; | |
| padding-bottom: 8rem; | |
| } | |
| .participation { | |
| padding: 3rem; | |
| margin-top: -5rem; | |
| } | |
| .participation h3 { | |
| margin-top: -5rem; | |
| margin-left: -3.5rem; | |
| } | |
| .participation p { | |
| -webkit-transform: translate(-1rem, -3rem); | |
| transform: translate(-1rem, -3rem); | |
| } | |
| } | |
| @media (min-width: 1225px) { | |
| div.page-wrapper { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| width: 95%; | |
| margin: auto; | |
| } | |
| .preamble { | |
| margin-top: -24rem; | |
| padding-top: 0rem; | |
| padding-bottom: 8rem; | |
| } | |
| .explanation { | |
| margin-top: -16rem; | |
| padding: 2rem; | |
| } | |
| .explanation h3 { | |
| -webkit-transform: rotate(90deg) translate(-10rem, -34rem); | |
| transform: rotate(90deg) translate(-10rem, -34rem); | |
| } | |
| .explanation p { | |
| -webkit-transform: translate(.1rem, -12rem); | |
| transform: translate(.1rem, -12rem); | |
| } | |
| .explanation p:nth-child(3) { | |
| margin-bottom: -9rem; | |
| } | |
| .participation { | |
| margin-top: -8rem; | |
| padding-bottom: 0; | |
| } | |
| .benefits { | |
| margin-left: -8rem; | |
| margin-top: -45rem; | |
| } | |
| .requirements { | |
| margin-top: 10rem; | |
| -webkit-align-self: center; | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| } | |
| .zen-resources ul { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-flow: wrap; | |
| -ms-flex-flow: wrap; | |
| flex-flow: wrap; | |
| right: 0rem; | |
| top: -0rem; | |
| } | |
| .zen-resources ul li { | |
| margin-bottom: -4rem | |
| } | |
| } | |
| @media (min-width: 1716px) { | |
| div.page-wrapper { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| section.intro { | |
| max-width: 75rem; | |
| -webkit-box-ordinal-group: -1; | |
| -webkit-order: -2; | |
| -ms-flex-order: -2; | |
| order: -2; | |
| } | |
| aside { | |
| -webkit-box-ordinal-group: 0; | |
| -webkit-order: -1; | |
| -ms-flex-order: -1; | |
| order: -1; | |
| position: absolute; | |
| top: 10rem; | |
| right: -5rem; | |
| max-width: 67rem; | |
| } | |
| div.supporting { | |
| max-width: 75rem; | |
| } | |
| .requirements { | |
| margin-top: 10rem; | |
| /* margin-right: -40rem;*/ | |
| } | |
| footer{ | |
| /* margin-left: 20rem;*/ | |
| } | |
| .requirements h3 { | |
| position: absolute; | |
| -webkit-transform: rotate(90deg) translate(0vw, 5vw); | |
| transform: rotate(90deg) translate(0vw, 5vw); | |
| -webkit-transform-origin: left; | |
| transform-origin: left; | |
| } | |
| .zen-resources ul { | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| } | |
| } |