cannabinieri website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

194 lines
2.8 KiB

/* 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;
}
}