* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-appearance: none; }

html { height: 100%; }

html, body {
  margin: 0; padding: 0; height: 100%;
}

body { font-family: 'Open Sans'; font-size: 14px; color: #000; background: url(../images/bg.jpg) center center no-repeat; background-size: cover; background-attachment: fixed; }

a { color: #000; text-decoration: none; }

div.main {
	display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;

	div.logo {
		display: flex; padding: 24px 48px; margin-top: 32px;
		img {
			display: flex; width: 100%; max-width: 300px;
		} 
	}

	ul {
		list-style: none; margin: 0; padding: 0; display: flex; margin: 48px 0;

		/* Mobil */
		@media only screen and (max-width: 700px) {
			flex-direction: column; width: 100%; padding: 0 24px;
		}

		li {
			margin: 0 24px; display: flex;

			/* Mobil */
			@media only screen and (max-width: 700px) {
				margin: 12px 0; width: 100%;
			}

			a {
				display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: #FFF; box-shadow: 0 0 5px #000;

				@media only screen and (max-width: 700px) {
					width: 100%;
				}

				div.top {
					display: flex; flex-direction: column; align-items: center; padding: 24px;
					img {
						height: 120px;
					}

					div.desc {
						width: 240px; margin: 32px 0;

						/* Mobil */
						@media only screen and (max-width: 700px) {
							display: none; 
						}
					}
				}

				span {
					width: 100%; background: #5191cd; padding: 16px 0; text-align: center; color: #FFF; font-weight: bold; font-size: 16px;
				}

				&.dackpartner {
					span { background: #1d2747; }
				}

				&:hover {
					 box-shadow: 0 0 5px #333;
					span { filter: brightness(80%); }
				}
			}

		}
	}
}