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.
 
 
 

286 lines
4.3 KiB

/* small mobile */
/* Fix overlaps */
.banner {
background-image: url('../img/banner_img.png');
background-repeat: no-repeat;
background-size: contain;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 87.5vw;
padding: 0 1vw;
line-height: 8vw;
letter-spacing: .125vw;
}
.banner h6 {
color: #ff00ff;
font-family: 'Lato', sans-serif;
font-size: 5vw;
border: 1vw solid #ff00ff;
border-radius: 5vw;
padding: 2vw 2vw;
}
.banner h6 a {
text-decoration: none;
color: #3dbd92;
}
.banner h6 a:active {
opacity: 60%;
}
.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;
transition: all .4 ease-in-out;
}
.link button:active, .link button:hover {
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;
height: 45vw;
width: 45vw;
}
.link .sub_container p {
font-size: 4.5vw;
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: 5.5vw;
letter-spacing: .05vw;
}
.link .sub_container p a {
color: #333;
text-decoration: none;
font-size: 4.5vw;
}
.link .sub_container p a:active {
opacity: 60%;
color: #ff00ff;
}
.link .sub_container p a:hover {
opacity: 60%;
color: #ff00ff;
}
.banner .banner_img {
height: 80vw;
}
@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: 700px) {
.banner {
height: 47.5vw;
line-height: 5vw;
background-size: 60vw;
}
.banner h6 {
font-size: 3vw;
border: .5vw solid #ff00ff;
}
}
@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;
}
.banner {
height: 32vw;
line-height: 5vw;
background-size: 40vw;
background-position: center;
}
.banner h6 {
font-size: 2.25vw;
border: .45vw solid #ff00ff;
padding: 1vw 2vw;
}
.link .sub_container p {
font-size: 3vw;
}
#small_screen {
display: none;
}
}
@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: 210vw;
}
#miner .sub_container {
width: 68vw;
height: 40vw;
}
}