853 lines
22 KiB
CSS
853 lines
22 KiB
CSS
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||
|
|
v2.0 | 20110126
|
||
|
|
License: none (public domain)
|
||
|
|
*/
|
||
|
|
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, form, label, input {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
border: 0;
|
||
|
|
font-size: 100%;
|
||
|
|
font: inherit;
|
||
|
|
vertical-align: baseline;
|
||
|
|
}
|
||
|
|
div, span, h1, h2, h3, h4, h5, h6, p, a, img, form, label, input, header, nav, main, article, section {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
line-height: 1;
|
||
|
|
font-family: Tahoma, sans-serif;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 100vh;
|
||
|
|
color: #000;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
#container {
|
||
|
|
flex-grow: 2;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
header {
|
||
|
|
background: #444;
|
||
|
|
position: relative;
|
||
|
|
text-shadow: 0 0 10px #000;
|
||
|
|
}
|
||
|
|
header .container {
|
||
|
|
position: relative;
|
||
|
|
bottom: 0%;
|
||
|
|
left: 0%;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #000;
|
||
|
|
min-height: 485px;
|
||
|
|
}
|
||
|
|
header .container video {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
header .container img {
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 0;
|
||
|
|
min-height: 485px;
|
||
|
|
}
|
||
|
|
header nav {
|
||
|
|
display: flex;
|
||
|
|
z-index: 6;
|
||
|
|
position: absolute;
|
||
|
|
align-items: center;
|
||
|
|
top: 0%;
|
||
|
|
left: 0%;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
header nav .filler {
|
||
|
|
flex: 2 1 auto;
|
||
|
|
}
|
||
|
|
header nav .title {
|
||
|
|
margin: 0 20px 0 50px;
|
||
|
|
height: 70px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 90px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-color: transparent;
|
||
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 499.99951 478.24803\" height=\"478.25\" width=\"500\"><path d=\"M452.6 120.04a166.07 166.07 0 0 0-76.5-97.16A166.13 166.13 0 0 0 250.53 6 166.15 166.15 0 0 1 342.06 70a166.14 166.14 0 0 1 110.55 50.05\" fill=\"%23fadc43\"/><path d=\"M157.37 70.02A165.9 165.9 0 0 1 250 92.06 165.93 165.93 0 0 1 342.06 70 166.15 166.15 0 0 0 250.53 6a166.17 166.17 0 0 0-93.16 64.02\" fill=\"%23f8cc0a\"/><path d=\"M250 92.06a165.9 165.9 0 0 0-92.63-22.04 168.08 168.08 0 0 0-8.95 13.87 165.9 165.9 0 0 0-22.35 83.32 167.5 167.5 0 0 1 67.49-21.57c14.3-22 33.67-40.4 56.44-53.58\" fill=\"%23f9b00c\"/><path d=\"M172.57 192.36a165.63 165.63 0 0 1 20.99-46.72 167.5 167.5 0 0 0-67.49 21.57c.02 23.7 5.11 47.14 14.81 68.66a165.73 165.73 0 0 1 31.7-43.51\" fill=\"%23d29413\"/><path d=\"M172.57 192.36a165.73 165.73 0 0 0-31.69 43.5 165.89 165.89 0 0 0 32.59 47.8 166.74 166.74 0 0 1-6.8-47.23c0-15.26 2.06-30.03 5.9-44.07\" fill=\"%23ae7b19\"/><path d=\"M150.19 402.28a166.1 166.1 0 0 1-102.02-48.67A166.14 166.14 0 0 0 126.1 455.9a166.12 166.12 0 0 0 124.5 17.16 166.18 166.18 0 0 1-100.41-70.78\" fill=\"%23ee2834\"/><path d=\"M349.2 402.34A165.9 165.9 0 0 1 250 380.8a165.88 165.88 0 0 1-83.33 22.3c-5.56 0-11.06-.27-16.48-.8a166.18 166.18 0 0 0 100.4 70.77 166.19 166.19 0 0 0 98.62-70.72\" fill=\"%23d9252e\"/><path d=\"M250 380.8a165.9 165.9 0 0 0 83.33 22.3c5.36 0 10.66-.27 15.88-.76a165.82 165.82 0 0 0 26.91-90.78 167.46 167.46 0 0 1-74.06 22.08A167.53 167.53 0 0 1 250 380.79\" fill=\"%23c42129\"/><path d=\"M327.16 281.52a166.27 166.27 0 0 1-25.1 52.12 167.46 167.46 0 0 0 74.06-22.07 167.44 167.44 0 0 0-18.17-75.67 165.93 165.93 0 0 1-30.79 45.62\" fill=\"%23b11e25\"/><path d=\"M327.98 194.37a166.79 166.79 0 0 1 5.35 42.06c0 15.63-2.15 30.75-6.17 45.1a165.93 165.93 0 0 0 30.79-45.63 165.74 165.74 0 0 0-29.97-41.53\" fill=\"%239f1b21\"/><path d=\"M157.37 70.02A166.17 166.17 0 0 1 250.53 6a166.15 166.15 0 0 0-127.55 16.35 166.12 166.12 0 0 0-77.1 99.24 166.18 166.18 0 0 1 111.49-51.57\" fill=\"%23fadc43\"/><path d=\"M57.8 242.35c2.2-4.77 4.62-9.49 7.29-14.13a165.93 165.93 0 0 1 60.98-61.01 165.9 165.9 0 0 1 22.35-83.32c2.78-4.82 5.77-9.44 8.95-13.87a166.18 166.18 0 0 0-111.5 51.57c-10.99 39.1-7.76 82.17 11.94 120.76\" fill=\"%23f8cc0a\"/><path d=\"M140.88 235.87a167.52 167.52 0 0 1-14.8-68.66 165.93 165.93 0 0 0-60.99 61.01c-2.67 4.64-5.1 9.36-7.28 14.13a165.84 165.84 0 0 0 65.15 68.69c.02-26.12 6.2-51.91 17.92-75.17\" fill=\"%23f9b00c\"/><path d=\"M197.58 333.14a166.06 166.06 0 0 1-24.11-49.47 165.89 165.89 0 0 1-32.59-47.8 167.42 167.42 0 0 0-17.92 75.17 167.58 167.58 0 0 0 74.62 22.1\" fill=\"%23d29413\"/><path d=\"M209.43 311.56a166.67 166.67 0 0 1-35.96-27.9 166.06 166.06 0 0 0 24.11 49.48c16.95.9 34.13-.77 50.95-5.18a167.52 167.52 0 0 1-39.1-16.4\" fill=\"%23ae7b19\"/><path d=\"M349.2 402.34a166.19 166.19 0 0 1-98.6 70.72 166.1 166.1 0 0 0 122.38-17.7 166.15 166.15 0 0 0 77.4-100.3 166.17 166.17 0 0 1-101.17 47.28\" fill=\"%23c91840\"/><path d=\"M441.53 242.37a165.8 165.8 0 0 1-65.41 69.2 165.82 165.82 0 0 1-26.91 90.77 166.17 166.17 0 0 0 101.18-47.28 166.19 166.19 0 0 0-8.86-112.69\" fill=\"%23a7193a\"/><path d=\"M373.01 166.68a167.46 167.46 0 0 1-15.06 69.22 167.44 167.44 0 0 1 18.17 75.67 165.8 165.8 0 0 0 65.4-69.2A172.14 172.14 0 0 0 434 227.7a165.96 165.96 0 0 0-60.98-61.01\" fill=\"%23881933\"/><path d=\"M306.14 145.18a165.82 165.82 0 0 1 21.84 49.19 165.74 165.74 0 0 1 29.97 41.53A167.45 167.45 0 0 0 373 166.68a167.54 167.54 0 0 0-66.87-21.5\" fill=\"%236b172c\"/><path d=\"M292.76 167.22a166.85 166.85 0 0 1 35.22 27.15 165.82 165.82 0 0 0-21.84-49.2 165.9 165.9 0 0 0-57.69 4.32 166.78 166.78 0 0 1 44.31 17.73\" fill=\"%23511423\"/><path d=\"M452.6 120.04a166.18 166.18 0 0 1-11.07 122.33 166.19 166.19 0 0 1 8.86 112.69A166.14 166.14 0 0 0 500 236.43c0-45.3-18.07-86.36-47.4-116.4\" fill=\"%235ac5eb\"/><path d=\"M342.06 69.99a166.05 166.05 0 0 1 30.95 96.69A165.96 165.96 0 0 1 434 227.69c2.77 4.82 5.28 9.72 7.54 14.68a166.18 166.18 0 0 0 11.
|
||
|
|
background-position: left center;
|
||
|
|
background-size: auto 70px;
|
||
|
|
font-size: 1.6em;
|
||
|
|
color: #fff;
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
header nav a {
|
||
|
|
font-size: 1.2em;
|
||
|
|
color: #fff;
|
||
|
|
text-shadow: 0 0 20px #000;
|
||
|
|
padding: 10px 20px;
|
||
|
|
text-decoration: none;
|
||
|
|
opacity: 0.6;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
header nav a div {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 20px;
|
||
|
|
right: 20px;
|
||
|
|
border-bottom: 2px solid #fff;
|
||
|
|
transition: transform 0.3s;
|
||
|
|
transform: scaleX(0);
|
||
|
|
}
|
||
|
|
header nav a:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
header nav a:hover div {
|
||
|
|
transition: transform 0.7s;
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
header nav a.active {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
header nav a.active div {
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
header .content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 5;
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0%;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 485px;
|
||
|
|
color: #fff;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
header .content h1 {
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 4.6vw;
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 10px;
|
||
|
|
transition: opacity 1s, transform 1s;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
header .content h2 {
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 3vw;
|
||
|
|
transition: opacity 1.2s, transform 1.2s;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(50px);
|
||
|
|
}
|
||
|
|
header.visible h1,
|
||
|
|
header.visible h2 {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
}
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-grow: 2;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
article {
|
||
|
|
display: flex;
|
||
|
|
padding: 0 50px;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 82vh;
|
||
|
|
height: 600px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
article h3 {
|
||
|
|
font-size: 2em;
|
||
|
|
padding: 10px 20px 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
article section {
|
||
|
|
display: flex;
|
||
|
|
flex: 2 1 auto;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
article section aside {
|
||
|
|
flex: 0 1 50%;
|
||
|
|
max-width: 600px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
article section aside .item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
article section aside p {
|
||
|
|
font-size: 1.2em;
|
||
|
|
line-height: 1.4em;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
article section aside h5 {
|
||
|
|
text-align: center;
|
||
|
|
margin: 20px 10px;
|
||
|
|
font-size: 1.2em;
|
||
|
|
line-height: 1.4em;
|
||
|
|
font-weight: bold;
|
||
|
|
border-bottom: 2px solid #29688c;
|
||
|
|
padding: 10px 50px;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
article section aside a {
|
||
|
|
text-decoration: none;
|
||
|
|
border: 2px solid #29688c;
|
||
|
|
align-self: center;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 10px 30px 12px;
|
||
|
|
color: #29688c;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
article section aside p,
|
||
|
|
article section aside h5,
|
||
|
|
article section aside a,
|
||
|
|
article section aside h3 {
|
||
|
|
transition: opacity 1.2s, transform 1.2s;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate(0px, 50px);
|
||
|
|
}
|
||
|
|
article section .image {
|
||
|
|
flex: 0 1 50%;
|
||
|
|
max-width: 600px;
|
||
|
|
background-position: center;
|
||
|
|
background-size: 90% auto;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
transition: opacity 1.2s, transform 1.2s;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate(50%, 0px);
|
||
|
|
}
|
||
|
|
article .visible p,
|
||
|
|
article .visible a,
|
||
|
|
article .visible .image,
|
||
|
|
article .visible h5,
|
||
|
|
article .visible h3,
|
||
|
|
article .visible.image {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
background: #29688c;
|
||
|
|
padding: 100px;
|
||
|
|
}
|
||
|
|
footer .outerbox {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-height: 50vh;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 0 10px #020024;
|
||
|
|
}
|
||
|
|
footer .innerbox {
|
||
|
|
padding: 50px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
height: 500px;
|
||
|
|
}
|
||
|
|
footer .innerbox aside {
|
||
|
|
flex: 0 1 50%;
|
||
|
|
max-width: 600px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
footer .innerbox aside h3 {
|
||
|
|
font-size: 2em;
|
||
|
|
padding: 10px 20px 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
footer .innerbox aside p {
|
||
|
|
font-size: 1.2em;
|
||
|
|
line-height: 1.4em;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
footer .innerbox aside h5 {
|
||
|
|
text-align: center;
|
||
|
|
margin: 20px 10px;
|
||
|
|
font-size: 1.2em;
|
||
|
|
line-height: 1.4em;
|
||
|
|
font-weight: bold;
|
||
|
|
border-bottom: 2px solid #29688c;
|
||
|
|
padding: 10px 50px;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
footer .innerbox aside a {
|
||
|
|
text-decoration: none;
|
||
|
|
border: 2px solid #29688c;
|
||
|
|
align-self: center;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 10px 30px 12px;
|
||
|
|
color: #29688c;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
footer .innerbox .image {
|
||
|
|
flex: 0 1 50%;
|
||
|
|
max-width: 600px;
|
||
|
|
background-position: center;
|
||
|
|
background-size: 90% auto;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
transition: opacity 1.2s, transform 1.2s;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate(0px, 50%);
|
||
|
|
}
|
||
|
|
footer .innerbox .image.visible {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
footer .meta {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 40px 0 10px;
|
||
|
|
color: #777;
|
||
|
|
line-height: 1.6em;
|
||
|
|
}
|
||
|
|
footer .meta span {
|
||
|
|
margin: 0 10px;
|
||
|
|
}
|
||
|
|
footer .meta a {
|
||
|
|
color: #29688c;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 1000px) {
|
||
|
|
article {
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
footer .innerbox {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
footer .innerbox aside h3 {
|
||
|
|
padding: 30px 20px 20px;
|
||
|
|
}
|
||
|
|
footer .innerbox .image {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 600px;
|
||
|
|
height: 300px;
|
||
|
|
flex: 0 0 300px;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
footer .meta {
|
||
|
|
padding: 0px 0 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 800px) {
|
||
|
|
header .container nav {
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
header .container nav a.title {
|
||
|
|
width: 100%;
|
||
|
|
flex: 2 0 100%;
|
||
|
|
justify-content: center;
|
||
|
|
background-position: calc(50% - 60px) center;
|
||
|
|
padding-left: 100px;
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
header .container nav .filler {
|
||
|
|
flex: 0 0 0;
|
||
|
|
}
|
||
|
|
header .content h1 {
|
||
|
|
font-size: 2.3em;
|
||
|
|
}
|
||
|
|
header .content h2 {
|
||
|
|
font-size: 1.5em;
|
||
|
|
}
|
||
|
|
article {
|
||
|
|
height: auto !important;
|
||
|
|
}
|
||
|
|
article section {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 20px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
}
|
||
|
|
article section aside {
|
||
|
|
order: 2;
|
||
|
|
}
|
||
|
|
article section .image {
|
||
|
|
order: 1;
|
||
|
|
width: 100%;
|
||
|
|
background-size: contain;
|
||
|
|
flex: 0 0 300px;
|
||
|
|
transform: translate(0, 50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 680px) {
|
||
|
|
footer {
|
||
|
|
padding: 100px 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 500px) {
|
||
|
|
header .content {
|
||
|
|
top: 60px;
|
||
|
|
}
|
||
|
|
article {
|
||
|
|
padding-left: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
padding: 100px 20px;
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
footer .innerbox {
|
||
|
|
padding: 50px 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
article.solution {
|
||
|
|
box-shadow: 0 5px 50px rgba(0,0,0,0.333);
|
||
|
|
background: #e9e9e9;
|
||
|
|
margin: 0 0 5vh;
|
||
|
|
height: 800px;
|
||
|
|
}
|
||
|
|
article.solution h3 {
|
||
|
|
font-size: 5vh;
|
||
|
|
padding: 5vh 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
article.solution h3 .left,
|
||
|
|
article.solution h3 .right {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: 0px;
|
||
|
|
border-bottom: 2px solid #29688c;
|
||
|
|
}
|
||
|
|
article.solution h3 .left {
|
||
|
|
right: 100%;
|
||
|
|
left: -9999px;
|
||
|
|
}
|
||
|
|
article.solution h3 .right {
|
||
|
|
left: 100%;
|
||
|
|
right: -9999px;
|
||
|
|
}
|
||
|
|
article.hosting {
|
||
|
|
height: 600px;
|
||
|
|
}
|
||
|
|
article.programming {
|
||
|
|
background: #29688c;
|
||
|
|
background: linear-gradient(150deg, #020024 15%, #29688c 100%);
|
||
|
|
color: #fff;
|
||
|
|
position: relative;
|
||
|
|
min-height: auto;
|
||
|
|
height: 70vw;
|
||
|
|
max-height: 80vh;
|
||
|
|
min-height: 600px;
|
||
|
|
}
|
||
|
|
article.programming aside {
|
||
|
|
align-self: flex-start;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
margin-top: 5vh;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
width: 90%;
|
||
|
|
max-width: 1440px;
|
||
|
|
}
|
||
|
|
article.programming aside .item {
|
||
|
|
width: 50%;
|
||
|
|
min-width: 500px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
article.programming h3 {
|
||
|
|
align-self: flex-start;
|
||
|
|
padding: 10px 0 40px;
|
||
|
|
}
|
||
|
|
article.programming a {
|
||
|
|
border-color: #fff;
|
||
|
|
color: #fff;
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
article.programming .image {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 87%;
|
||
|
|
height: 90%;
|
||
|
|
max-width: none;
|
||
|
|
background-position: right bottom;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
article.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;
|
||
|
|
}
|
||
|
|
article.programming aside {
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
article.programming aside .item {
|
||
|
|
width: 100%;
|
||
|
|
min-width: auto;
|
||
|
|
}
|
||
|
|
article.programming h3 {
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
article.programming .image {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
max-width: none;
|
||
|
|
background-position: right bottom;
|
||
|
|
background-size: contain;
|
||
|
|
transform: translate(50%, 0);
|
||
|
|
}
|
||
|
|
article.programming .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
header.hosting h1 {
|
||
|
|
font-size: 4.3vw;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
header.hosting h2 {
|
||
|
|
font-size: 2.5vw;
|
||
|
|
}
|
||
|
|
article.hostintro .image {
|
||
|
|
transform: translate(-50%, 0px);
|
||
|
|
}
|
||
|
|
article.hostintro .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.hoststorage {
|
||
|
|
background: #29688c;
|
||
|
|
background: linear-gradient(150deg, #020024 15%, #29688c 100%);
|
||
|
|
color: #fff;
|
||
|
|
position: relative;
|
||
|
|
height: 80vh;
|
||
|
|
min-height: 600px;
|
||
|
|
}
|
||
|
|
article.hoststorage section {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
article.hoststorage aside {
|
||
|
|
align-items: center;
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
article.hoststorage aside .item {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 600px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
article.hoststorage h3 {
|
||
|
|
align-self: flex-start;
|
||
|
|
padding: 10px 0 40px;
|
||
|
|
}
|
||
|
|
article.hoststorage .image {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 50%;
|
||
|
|
height: 90%;
|
||
|
|
max-width: none;
|
||
|
|
background-position: left center;
|
||
|
|
background-size: contain;
|
||
|
|
transform: translate(-50%, 0px);
|
||
|
|
}
|
||
|
|
article.hoststorage .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.hostmanaged {
|
||
|
|
position: relative;
|
||
|
|
height: 80vh;
|
||
|
|
min-height: 600px;
|
||
|
|
}
|
||
|
|
article.hostmanaged section {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
article.hostmanaged aside {
|
||
|
|
align-items: center;
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
article.hostmanaged aside .item {
|
||
|
|
padding-left: 20px;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 600px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
article.hostmanaged h3 {
|
||
|
|
align-self: flex-start;
|
||
|
|
padding: 10px 0 40px;
|
||
|
|
}
|
||
|
|
article.hostmanaged .image {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 50%;
|
||
|
|
height: 90%;
|
||
|
|
max-width: none;
|
||
|
|
background-position: left center;
|
||
|
|
background-size: contain;
|
||
|
|
transform: translate(-50%, 0px);
|
||
|
|
}
|
||
|
|
article.hostmanaged .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 800px) {
|
||
|
|
header.hosting h1 {
|
||
|
|
font-size: 2.3em;
|
||
|
|
}
|
||
|
|
header.hosting h2 {
|
||
|
|
font-size: 1.5em;
|
||
|
|
}
|
||
|
|
article.hostintro h3 {
|
||
|
|
padding: 30px 0 30px;
|
||
|
|
}
|
||
|
|
article.hostintro .image {
|
||
|
|
transform: translate(0, 50%);
|
||
|
|
}
|
||
|
|
article.hostintro .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.hoststorage {
|
||
|
|
min-height: auto;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
article.hoststorage section {
|
||
|
|
justify-content: flex-start;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
article.hoststorage aside {
|
||
|
|
order: 1;
|
||
|
|
padding: 0 50px;
|
||
|
|
}
|
||
|
|
article.hoststorage .image {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
background-position: center;
|
||
|
|
padding-top: 66%;
|
||
|
|
position: relative;
|
||
|
|
order: 2;
|
||
|
|
}
|
||
|
|
article.hostmanaged {
|
||
|
|
min-height: auto;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
article.hostmanaged section {
|
||
|
|
justify-content: flex-start;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
article.hostmanaged aside {
|
||
|
|
order: 1;
|
||
|
|
padding: 0 50px;
|
||
|
|
}
|
||
|
|
article.hostmanaged aside .item {
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
article.hostmanaged .image {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 68%;
|
||
|
|
height: auto;
|
||
|
|
order: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 500px) {
|
||
|
|
article.hoststorage aside {
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
article.hostmanaged aside {
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
header.programming {
|
||
|
|
text-shadow: 0 0 30px #000;
|
||
|
|
}
|
||
|
|
header.programming nav a {
|
||
|
|
background-color: rgba(0,0,0,0.2);
|
||
|
|
border-radius: 20px;
|
||
|
|
box-shadow: 0 0 80px #000;
|
||
|
|
text-shadow: 0 0 80px #000;
|
||
|
|
opacity: 1;
|
||
|
|
color: #999;
|
||
|
|
transition: opacity 0.5 color 0.5s;
|
||
|
|
}
|
||
|
|
header.programming nav a.title {
|
||
|
|
color: #fff;
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
header.programming nav a.title:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
header.programming nav a:hover {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
header.programming nav a.active {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
header.programming h1 {
|
||
|
|
font-size: 5.8vw;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
header.programming h2 {
|
||
|
|
font-size: 3.5vw;
|
||
|
|
}
|
||
|
|
article.programmingintro .image {
|
||
|
|
transform: translate(-50%, 0px);
|
||
|
|
}
|
||
|
|
article.programmingintro .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.programmingstore {
|
||
|
|
background: #29688c;
|
||
|
|
background: linear-gradient(30deg, #020024 15%, #29688c 100%);
|
||
|
|
color: #fff;
|
||
|
|
position: relative;
|
||
|
|
height: 80vh;
|
||
|
|
min-height: 600px;
|
||
|
|
}
|
||
|
|
article.programmingstore section {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
article.programmingstore aside {
|
||
|
|
align-items: center;
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
article.programmingstore aside .item {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 600px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
article.programmingstore h3 {
|
||
|
|
align-self: flex-start;
|
||
|
|
padding: 10px 0 40px;
|
||
|
|
}
|
||
|
|
article.programmingstore .image {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 5%;
|
||
|
|
width: 50%;
|
||
|
|
height: 90%;
|
||
|
|
max-width: none;
|
||
|
|
background-position: center;
|
||
|
|
background-size: contain;
|
||
|
|
transform: translate(50%, 0px);
|
||
|
|
}
|
||
|
|
article.programmingstore .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.programmingcontracting .image {
|
||
|
|
transform: translate(-50%, 0px);
|
||
|
|
}
|
||
|
|
article.programmingcontracting .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 800px) {
|
||
|
|
header.programming nav a.title {
|
||
|
|
background-position: calc(50% - 60px) center;
|
||
|
|
}
|
||
|
|
header.programming h1 {
|
||
|
|
font-size: 5.8vw;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
header.programming h2 {
|
||
|
|
font-size: 3.5vw;
|
||
|
|
}
|
||
|
|
article.programmingintro .image {
|
||
|
|
transform: translate(0, 50%);
|
||
|
|
}
|
||
|
|
article.programmingintro .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.programmingintro h3 {
|
||
|
|
padding: 30px 0 30px;
|
||
|
|
}
|
||
|
|
article.programmingstore aside {
|
||
|
|
order: 1;
|
||
|
|
flex: 0 1 auto;
|
||
|
|
}
|
||
|
|
article.programmingstore h3 {
|
||
|
|
align-self: flex-start;
|
||
|
|
padding: 10px 0 40px;
|
||
|
|
}
|
||
|
|
article.programmingstore .image {
|
||
|
|
position: relative;
|
||
|
|
order: 2;
|
||
|
|
width: 100%;
|
||
|
|
padding-top: 430px;
|
||
|
|
height: auto;
|
||
|
|
background-size: auto 100%;
|
||
|
|
background-position: center -17px;
|
||
|
|
transform: translate(0, 50%);
|
||
|
|
}
|
||
|
|
article.programmingstore .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
article.programmingcontracting h3 {
|
||
|
|
padding: 30px 0 30px;
|
||
|
|
}
|
||
|
|
article.programmingcontracting .image {
|
||
|
|
transform: translate(0, 50%);
|
||
|
|
}
|
||
|
|
article.programmingcontracting .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
header.streaming {
|
||
|
|
text-shadow: 0 0 40px #000;
|
||
|
|
}
|
||
|
|
header.streaming h1 {
|
||
|
|
font-size: 5.7vw;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
header.streaming h2 {
|
||
|
|
font-size: 3vw;
|
||
|
|
}
|
||
|
|
article.streamintro .image {
|
||
|
|
transform: translate(-50%, 0px);
|
||
|
|
}
|
||
|
|
article.streamintro .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 800px) {
|
||
|
|
article.streamintro h3 {
|
||
|
|
padding: 30px 0 30px;
|
||
|
|
}
|
||
|
|
article.streamintro .image {
|
||
|
|
transform: translate(0, 50%);
|
||
|
|
}
|
||
|
|
article.streamintro .visible.image {
|
||
|
|
transform: translate(0px, 0px);
|
||
|
|
}
|
||
|
|
}
|