138 lines
2.3 KiB
Stylus
138 lines
2.3 KiB
Stylus
article {
|
|
&.solution {
|
|
box-shadow: 0 5px 50px #0005;
|
|
background: #e9e9e9;
|
|
margin: 0 0 5vh;
|
|
height: 800px;
|
|
|
|
h3 {
|
|
font-size: 5vh;
|
|
padding: 5vh 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
position: relative;
|
|
align-self: center;
|
|
|
|
.left, .right {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: 0px;
|
|
border-bottom: 2px solid #29688c;
|
|
}
|
|
|
|
.left {
|
|
right: 100%;
|
|
left: -9999px;
|
|
}
|
|
|
|
.right {
|
|
left: 100%;
|
|
right: -9999px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hosting {
|
|
height: 600px;
|
|
}
|
|
|
|
&.programming {
|
|
background: #29688c;
|
|
background: linear-gradient(150deg, #020024 15%, #29688c 100%);
|
|
color: white;
|
|
position: relative;
|
|
min-height: auto;
|
|
height: 70vw;
|
|
max-height: 80vh;
|
|
min-height: 600px;
|
|
|
|
section {
|
|
}
|
|
|
|
aside {
|
|
align-self: flex-start;
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-top: 5vh;
|
|
flex: 1 1 auto;
|
|
width: 90%;
|
|
max-width: 1440px;
|
|
|
|
.item {
|
|
width: 50%;
|
|
min-width: 500px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
align-self: flex-start;
|
|
padding: 10px 0 40px;
|
|
}
|
|
|
|
a {
|
|
border-color: white;
|
|
color: white;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.image {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 87%;
|
|
height: 90%;
|
|
max-width: none;
|
|
background-position: right bottom;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
&.video {
|
|
min-height: 70vh;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 810px) {
|
|
article.solution h3 {
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
article.programming {
|
|
max-height: none;
|
|
min-height: auto;
|
|
padding: 0 40px 300px;
|
|
|
|
section {
|
|
}
|
|
|
|
aside {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
|
|
.item {
|
|
width: 100%;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
align-self: center;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 300px;
|
|
max-width: none;
|
|
background-position: right bottom;
|
|
background-size: contain;
|
|
transform: translate(50%, 0);
|
|
}
|
|
|
|
.visible.image {
|
|
transform: translate(0px, 0px);
|
|
}
|
|
}
|
|
}
|