nfpis/app/styl/main.styl

1122 lines
24 KiB
Stylus

@require 'reset'
#container {
flex-grow: 2;
display: flex;
flex-direction: column;
}
header {
background: #444;
position: relative;
text-shadow: 0 0 10px black;
.container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
min-height: 485px;
video {
width: 100%;
position: absolute;
z-index: 1;
bottom: 0;
}
img {
width: 100%;
bottom: 0;
position: absolute;
z-index: 0;
min-height: 485px;
}
}
nav {
display: flex;
z-index: 6;
position: absolute;
align-items: center;
top: 0%;
left: 0%;
width: 100%;
padding: 10px;
.filler {
flex: 2 1 auto;
}
.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.08-122.33 166.14 166.14 0 0 0-110.55-50.05\" fill=\"%234da4dd\"/><path d=\"M373.01 166.68a166.05 166.05 0 0 0-30.95-96.7A165.93 165.93 0 0 0 250 92.06a167.47 167.47 0 0 1 56.14 53.13 167.54 167.54 0 0 1 66.87 21.5\" fill=\"%234286ce\"/><path d=\"M248.45 149.5a165.9 165.9 0 0 1 57.69-4.32A167.47 167.47 0 0 0 250 92.06a167.53 167.53 0 0 0-56.44 53.58 165.92 165.92 0 0 1 54.9 3.85\" fill=\"%233c5a98\"/><path d=\"M248.45 149.5a165.92 165.92 0 0 0-54.9-3.86 165.63 165.63 0 0 0-20.98 46.72 166.95 166.95 0 0 1 33.75-25.67 166.8 166.8 0 0 1 42.13-17.2\" fill=\"%2337366d\"/><path d=\"M57.8 242.35A166.12 166.12 0 0 1 45.89 121.6 166.1 166.1 0 0 0 0 236.43a166.1 166.1 0 0 0 48.17 117.18 166.1 166.1 0 0 1 9.64-111.26\" fill=\"%23fadc43\"/><path d=\"M150.19 402.28a165.86 165.86 0 0 1-27.23-91.25 165.84 165.84 0 0 1-65.15-68.68 166.1 166.1 0 0 0-9.64 111.26 166.1 166.1 0 0 0 102.02 48.67\" fill=\"%23f8cc0a\"/><path d=\"M122.96 311.04a165.86 165.86 0 0 0 27.23 91.24c5.42.54 10.92.82 16.48.82 30.36 0 58.81-8.12 83.33-22.3a167.5 167.5 0 0 1-52.42-47.66 167.58 167.58 0 0 1-74.62-22.1\" fill=\"%23f9b00c\"/><path d=\"M248.53 327.96c-16.82 4.4-34 6.08-50.95 5.18A167.5 167.5 0 0 0 250 380.79a167.53 167.53 0 0 0 52.06-47.15 165.98 165.98 0 0 1-53.53-5.68\" fill=\"%23d29413\"/><path d=\"M248.53 327.96a165.98 165.98 0 0 0 53.53 5.68 166.27 166.27 0 0 0 25.1-52.12 166.88 166.88 0 0 1-37.51 29.5 167.01 167.01 0 0 1-41.12 16.94\" fill=\"%23ae7b19\"/></svg>')
// background: url('./assets/logo_only.svg') no-repeat transparent;
background-position: left center;
background-size: auto 70px;
font-size: 1.6em;
color: white;
opacity: 0.6;
}
a {
font-size: 1.2em;
color: white;
text-shadow: 0 0 20px black;
padding: 10px 20px;
text-decoration: none;
opacity: 0.6;
transition: opacity 0.5s;
position: relative;
& div {
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
border-bottom: 2px solid white;
transition: transform 0.3s;
transform: scaleX(0);
}
&:hover {
opacity: 1;
& div {
transition: transform 0.7s;
transform: scaleX(1);
}
}
&.active {
opacity: 1;
& div {
transform: scaleX(1);
}
}
}
}
.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: white;
text-transform: uppercase;
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;
}
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);
}
}
&.visible {
h1, h2 {
opacity: 1;
transform: translateY(0px);
}
}
&.hosting {
h1 {
font-size: 4.3vw;
margin-bottom: 10px;
}
h2 {
font-size: 2.5vw;
}
}
&.programming {
text-shadow: 0 0 30px black;
nav a {
background-color: #0003;
border-radius: 20px;
box-shadow: 0 0 80px black;
text-shadow: 0 0 80px black;
opacity: 1;
color: #999;
transition: opacity 0.5 color 0.5s;
&.title {
color: white;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
&:hover {
color: white;
}
&.active {
color: white;
}
}
h1 {
font-size: 5.8vw;
margin-bottom: 10px;
}
h2 {
font-size: 3.5vw;
}
h1, h2 {
}
}
&.streaming {
text-shadow: 0 0 40px black;
h1 {
font-size: 5.7vw;
margin-bottom: 10px;
}
h2 {
font-size: 3vw;
}
}
}
/*header {
margin-top: 4em;
display: flex;
flex-direction: column;
align-items: stretch;
max-height: 600px;
padding: 0 2em;
h1 {
flex-grow: 2;
text-indent: -9999px;
padding-top: 96%;
background: url('./assets/logo.svg') center no-repeat transparent;
background-size: contain;
max-width: 400px;
}
}*/
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;
h3 {
font-size: 2em;
padding: 10px 20px 40px;
font-weight: bold;
text-align: center;
position: relative;
align-self: center;
}
section {
display: flex;
flex: 2 1 auto;
justify-content: center;
aside {
flex: 0 1 50%;
max-width: 600px;
display: flex;
flex-direction: column;
justify-content: center;
.item {
display: flex;
flex-direction: column;
}
p {
font-size: 1.2em;
line-height: 1.4em;
margin-bottom: 50px;
}
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;
}
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;
}
p, h5, a, h3 {
transition: opacity 1.2s, transform 1.2s;
opacity: 0;
transform: translate(0px, 50px);
}
}
.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);
}
}
.visible p,
.visible a,
.visible .image,
.visible h5,
.visible h3,
.visible.image {
opacity: 1;
transform: translate(0px, 0px);
}
&.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;
}
&.hostintro {
.image {
transform: translate(-50%, 0px);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.hoststorage {
background: #29688c;
background: linear-gradient(150deg, #020024 15%, #29688c 100%);
color: white;
position: relative;
height: 80vh;
min-height: 600px;
section {
justify-content: flex-end;
}
aside {
align-items: center;
max-width: none;
.item {
width: 100%;
max-width: 600px;
text-align: left;
}
}
h3 {
align-self: flex-start;
padding: 10px 0 40px;
}
.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);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.hostmanaged {
position: relative;
height: 80vh;
min-height: 600px;
section {
justify-content: flex-end;
}
aside {
align-items: center;
max-width: none;
.item {
padding-left: 20px;
width: 100%;
max-width: 600px;
text-align: left;
}
}
h3 {
align-self: flex-start;
padding: 10px 0 40px;
}
.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);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.programmingintro {
.image {
transform: translate(-50%, 0px);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.programmingstore {
background: #29688c;
background: linear-gradient(30deg, #020024 15%, #29688c 100%);
color: white;
position: relative;
height: 80vh;
min-height: 600px;
section {
justify-content: flex-start;
}
aside {
align-items: center;
max-width: none;
.item {
width: 100%;
max-width: 600px;
text-align: left;
}
}
h3 {
align-self: flex-start;
padding: 10px 0 40px;
}
.image {
position: absolute;
right: 0;
top: 5%;
width: 50%;
height: 90%;
max-width: none;
background-position: center;
background-size: contain;
transform: translate(50%, 0px);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.programmingcontracting {
.image {
transform: translate(-50%, 0px);
}
.visible.image {
transform: translate(0px, 0px);
}
}
}
footer {
background: #29688c;
padding: 100px;
.outerbox {
display: flex;
flex-direction: column;
min-height: 50vh;
background: white;
box-shadow: 0 0 10px #020024;
}
.innerbox {
padding: 50px;
display: flex;
justify-content: center;
height: 500px;
aside {
flex: 0 1 50%;
max-width: 600px;
display: flex;
flex-direction: column;
justify-content: center;
h3 {
font-size: 2em;
padding: 10px 20px 40px;
font-weight: bold;
text-align: center;
position: relative;
align-self: center;
}
p {
font-size: 1.2em;
line-height: 1.4em;
margin-bottom: 50px;
}
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;
}
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;
}
}
.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%);
&.visible {
transform: translate(0px, 0px);
opacity: 1;
}
}
}
.meta {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 40px 0 10px;
color: #777;
line-height: 1.6em;
span {
margin: 0 10px;
}
a {
color: #29688c;
text-decoration: none;
}
}
}
@media only screen and (max-width: 1000px) {
article {
font-size: 0.9em;
}
footer {
font-size: 0.9em;
.innerbox {
flex-direction: column;
align-items: center;
height: auto;
aside h3 {
padding: 30px 20px 20px;
}
.image {
width: 100%;
max-width: 600px;
height: 300px;
flex: 0 0 300px;
background-size: contain;
}
}
.meta {
padding: 0px 0 30px;
}
}
}
@media only screen and (max-width: 810px) {
article.solution h3 {
font-size: 2em;
}
}
@media only screen and (max-width: 800px) {
header {
.container nav {
flex-wrap: wrap;
justify-content: center;
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;
}
.filler {
flex: 0 0 0;
}
}
.content {
h1 {
font-size: 2.3em;
}
h2 {
font-size: 1.5em;
}
}
&.hosting {
h1 {
font-size: 2.3em;
}
h2 {
font-size: 1.5em;
}
}
&.programming {
nav a {
&.title {
background-position: calc(50% - 60px) center;
}
}
h1 {
font-size: 5.8vw;
margin-bottom: 10px;
}
h2 {
font-size: 3.5vw;
}
h1, h2 {
}
}
}
article {
height: auto !important;
section {
flex-direction: column;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
aside {
order: 2;
}
.image {
order: 1;
width: 100%;
background-size: contain;
flex: 0 0 300px;
transform: translate(0, 50%);
}
}
&.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);
}
}
&.hostintro {
h3 {
padding: 30px 0 30px;
}
.image {
transform: translate(0, 50%);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.hoststorage {
min-height: auto;
padding: 0;
section {
justify-content: flex-start;
padding-bottom: 0;
}
aside {
order: 1;
padding: 0 50px;
}
.image {
width: 100%;
height: auto;
background-position: center;
padding-top: 66%;
position: relative;
order: 2;
}
}
&.hostmanaged {
min-height: auto;
padding: 0;
section {
justify-content: flex-start;
padding-bottom: 0;
}
aside {
order: 1;
padding: 0 50px;
}
aside .item {
padding-left: 0;
}
.image {
position: relative;
width: 100%;
padding-top: 68%;
height: auto;
order: 2;
}
}
&.programmingintro {
.image {
transform: translate(0, 50%);
}
.visible.image {
transform: translate(0px, 0px);
}
h3 {
padding: 30px 0 30px;
}
}
&.programmingstore {
aside {
order: 1;
flex: 0 1 auto;
}
h3 {
align-self: flex-start;
padding: 10px 0 40px;
}
.image {
position: relative;
order: 2;
width: 100%;
padding-top: 430px;
height: auto;
background-size: auto 100%;
background-position: center -17px;
transform: translate(0, 50%);
}
.visible.image {
transform: translate(0px, 0px);
}
}
&.programmingcontracting {
h3 {
padding: 30px 0 30px;
}
.image {
transform: translate(0, 50%);
}
.visible.image {
transform: translate(0px, 0px);
}
}
}
}
@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;
&.hoststorage {
aside {
padding: 0 10px;
}
}
&.hostmanaged {
aside {
padding: 0 10px;
}
}
}
footer {
padding: 100px 20px;
font-size: 0.8em;
.innerbox {
padding: 50px 15px;
}
}
}
/* section,
aside {
display: flex;
flex-direction: column;
& > * {
max-width: 600px;
align-self: center;
text-align: center;
}
}
<a href="https://www.freepik.com/free-photos-vectors/business">Business vector created by pikisuperstar - www.freepik.com</a>
section {
padding: 0.5em 1em 3em;
p {
font-size: 1.5em;
line-height: 1.2em;
}
h5 {
margin-top: 1em;
}
}
aside {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
background: #ddd;
padding: 1em 1em 0.6em;
margin: 2em 0 4em;
span {
font-size: 0.9em;
}
h3 {
font-size: 1.8em;
line-height: 2em;
}
}
.clients {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1em;
.client {
margin: 0 0.6em;
padding: 1em 0;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 35px;
text-indent: -9999px;
&.stjornarrad {
background-image: url('./assets/stjornarradid.svg');
width: 64px;
}
&.aranja {
background-image: url('./assets/aranja.svg');
background-position: center 28px;
width: 100px;
}
&.jokula {
background-image: url('./assets/jokula.png');
background-position: center 24px;
width: 120px;
}
&.filadelfia {
background-image: url('./assets/filadelfia.png');
width: 67px;
}
}
}
footer {
flex-grow: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
span {
flex-grow: 2;
text-align: center;
font-size: 0.8em;
color: #999;
line-height: 1.5em;
padding: 1em;
}
}
@media only screen and (max-width: 640px) {
section p {
font-size: 1.3em;
}
}
@media only screen and (max-width: 500px) {
section p {
font-size: 1.1em;
}
}*/