|
|
- /* small mobile */
-
- .height {
- height: 270vw;
- position: relative;
- }
-
- .container {
- font-family: 'Lato', sans-serif;
- background-image: url('../img/hero.png');
- background-size: contain;
- background-repeat: no-repeat;
- height: calc(100% - 30vh);
-
- }
-
- img {
- width: 100vw;
- z-index: 0;
- grid-row: 1/33;
- grid-column: 1/25;
- }
-
-
- .link {
- display: flex;
- flex-direction: column;
- z-index: 2;
- position: absolute;
- height: 60vw;
- width: 40vw;
- }
-
- .link button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 2rem;
- height: 2rem;
- border-radius: 50%;
- border: .1rem solid hsl(300, 100%, 50%);
- background-color: hsl(300, 100%, 50%);
- cursor: pointer;;
- align-self: center;
- justify-self: center;
- }
-
- .link button:active {
- box-shadow: 0px 0px 10px hsl(300, 100%, 30%);
- }
-
-
- .link a {
- color: #fff;
- text-decoration: none;
- font-weight: 600;
- font-size: 3vw;
- transition: all .5s ease-in-out;
- }
-
-
- .link .sub_container {
- display: none;
- grid-column: 1/5;
- grid-row: 2/5;
- padding: 3vh 1vw 0 1vw;
- }
-
- .link .sub_container p {
- font-size: 2vw;
- text-align: center;
- color: #333;
- background-color: rgba(255, 255, 255, 0.7);
- border-radius: .03rem;
- width: 100%;
- height: 100%;
- align-self: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1vw 2vw;
- line-height: 4vw;
- letter-spacing: .05vw;
- }
-
- @media(min-width: 300px) {
- #hemp {
- margin-left: 50vw;
- }
-
- #spider {
- margin-left: 56vw;
- }
-
- #cube {
- margin-left: 5vw;
- }
-
- #offgrid {
- margin-left: 56vw;
- }
-
- #machina {
- margin-left: 58vw;
- }
- #miner {
- margin-left: 30vw;
- }
-
- }
-
- @media(min-width: 400px) {
- #hemp {
- margin-left: 50vw;
- }
-
- #offgrid {
- margin-left: 60vw;
- }
-
-
- button {
- width: 2.5rem !important;
- height: 2.5rem !important;
- }
- }
-
- @media(min-width: 500px) {
-
-
- button {
- width: 3rem !important;
- height: 3rem !important;
- }
- }
-
- @media(min-width: 600px) {
-
- }
-
- @media(min-width: 800px) {
-
-
- button {
- width: 3.5rem !important;
- height: 3.5rem !important;
- }
- }
-
-
-
- @media(min-width: 1000px) {
- button {
- width: 4.5rem !important;
- height: 4.5rem !important;
- }
- }
-
- @media (min-height: 500px) {
- #hemp {
- margin-top: 5vw;
- }
-
- #permapp {
- margin-top: 33vw;
- }
-
- #spider {
- margin-top: 60vw;
- }
-
- #cube {
- margin-top: 90vw;
- }
-
- #offgrid {
- margin-top: 130vw;
- }
-
- #cyber {
- margin-top: 145vw;
- }
-
- #machina {
- margin-top: 180vw;
- }
-
- #miner{
- margin-top: 230vw;
- }
-
- }
-
-
|