/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, form {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
@-webkit-keyframes in {
0% { opacity: 0; }
100% { opacity: 1; }
}
* {
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
html {
height: 100%;
width: 100%;
}
body {
font-family: quicksand, sans-serif;
color: #202020;
background: #fff;
font-size: 24px;
line-height: 1.6;
font-weight: 400;
}
ol, ul {
list-style: none;
}
.bold, b, strong {
font-weight: 700;
}
p {
padding: 0 0 30px 0;
}
em, i {
font-style: italic;
}
h1, h2 {
font-size: 44px;
padding: 0 0 2vw 0;
margin: 0;
}
#cleim h2 {
padding: 0 14vw 5vw 0;
}
h3 {
display: inline-block;
color: #202020;
background: #d5e6f2;
padding: 10px 30px;
margin: 1vw 1vw 1vw 0;
}
h4 {
margin: 5vw 0 0;
}
a {
color: #202020;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
border-bottom: #202020 dotted 2px;
}
.button {
display: inline-block;
border: #404040 solid 2px;
border-radius: 5px;
padding: 5px 10px 7px;
margin: 2vw 0 0;
font-size: 14px;
line-height: 14px;
background: #404040;
color: #fff
}
.button:hover {
border: #404040 solid 2px;
background: none;
color: #404040
}
.noborder, .noborder:hover {
border-bottom: none;
}
.noborder:hover h3 {
background: #27AAFF;
color: #fff;
}
a:hover {
color: #27AAFF;
border-bottom: #27AAFF dotted 2px;
}
hr {
border: 1px solid #202020;
}
img {
display: block;
}
.bg {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
background: rgba(0,0,0,0.2);
}
.back {
position: absolute;
left: 52%;
bottom: -200%;
right: -200%;
top: -200%;
background: #303030;
transform: rotate(30deg);
}
header {
position: fixed;
height: 100vh;
width: 80px;
top: 0;
left: 0;
background: #27AAFF;
z-index:2;
}
#logo {
position: absolute;
top: 50%;
left: 17px;
margin-top: -20px;
}
#logo img{
width: 45px;
}
#open-menu {
position: fixed;
top: 50%;
margin-top: 20px;
right: 2vw;
transform: rotate(90deg);
transform-origin: top right;
font-size: 18px;
cursor: pointer;
}
#close-menu {
position: absolute;
top: 50%;
margin-top: 14px;
right: 2vw;
transform: rotate(90deg);
transform-origin: top right;
font-size: 18px;
cursor: pointer;
}
#menu {
position: fixed;
top: 0;
right: -500px;
min-height: 100%;
width: 500px;
font-size: 18px;
z-index: 1;
background: #f5f5f5;
opacity: 0;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
padding: 150px 50px;
box-sizing: border-box;
}
#menu.open {
opacity: 1;
right: 0;
}
#menu h2 {
padding: 25vh 4vh 0;
color: #27AAFF;
}
#menuline {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 24px;
}
#menuline li {
list-style: none;
line-height: 2;
}
#menuline li a {
text-decoration: none;
border: none;
color: #aaaaaa;
position: relative;
padding: 0;
margin: 0;
}
#menuline li a:hover, #menuline .current a {
color: #303030;
}
#kontakt-button {
position: fixed;
top: 120px;
right: 2vw;
transform: rotate(90deg);
transform-origin: top right;
font-size: 18px;
cursor: pointer;
}
#close {
position: absolute;
top: 94px;
right: 2vw;
transform: rotate(90deg);
transform-origin: top right;
font-size: 18px;
cursor: pointer;
}
#kontakt {
position: fixed;
top: 0;
right: -500px;
min-height: 100%;
width: 500px;
font-size: 18px;
z-index: 1;
background: #f5f5f5;
opacity: 0;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#kontakt.open {
display: block;
opacity: 1;
right: 0;
width: 500px;
}
#kontakt-data {
right: 0;
height: 100vh;
overflow-y: auto;
box-sizing: border-box;
padding: 150px 50px 50px;
}
.kontakt {
cursor: pointer;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
.page {
position: relative;
float: left;
width: calc(100% - 80px);
margin-left: 80px;
padding: 2vw 3vw 3vw 2vw;
box-sizing: border-box;
color: #101010;
}
.grey-bg{
background: #f5f5f5;
}
.feed {
position: relative;
width: 700px;
margin: 0 auto;
}
.feed small {
display: block;
font-size: 12px;
padding: 20px 0 10px 20px;
}
.feed p{
font-size: 15px;
position: relative;
padding: 20px;
}
.post {
position: relative;
width: 100%;
background: #fff;
border: 1px #ebebeb solid;
border-radius: 10px;
padding-bottom: 20px;
margin-bottom: 40px;
}
.post img{
width: 100%;
}
.user {
position: relative;
margin: 20px;
}
.user img{
position: relative;
float: left;
margin-right: 10px;
width: 50px;
border-radius: 50px;
}
.user p{
font-size: 12px;
font-weight: 700;
position: relative;
padding: 14px 0;
}
.del {
display: block;
font-size: 12px;
font-weight: 700;
padding: 20px 0 10px 20px;
}
.del:before {
content:"➦ ";
}
.link {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
text-align: center;
background: #27AAFF;
border-radius: 5px;
visibility: hidden;
opacity: 0;
z-index: 999;
}
.link:target {
visibility:visible;
opacity: 100;
}
.link h3, .link small {
padding: 0 0 20px;
margin: 0;
color: #fff;
background: none;
}
.link p {
background: #fff;
padding: 10px;
border-radius: 30px;
}
.history-back {
position: absolute;
top: 0;
right: 10px;
border: none;
color: #fff;
cursor: pointer;
padding: 5px;
line-height: 1;
}
.history-back:hover {
color: #fff;
}
.slider {
padding: 0;
margin: 0;
overflow: hidden;
}
.closer {
padding-bottom: 0;
}
.jobber-text h2 {
color: #101010;
}
.top {
position: relative;
float: left;
width: 100%;
box-sizing: border-box;
margin-bottom: 12vw;
}
.top img {
width: 100%;
}
.top .title {
position: absolute;
bottom: -6vw;
left: 6vw;
background: #27AAFF;
padding: 2vw;
color: #fff;
width: 50%;
}
.top .title h2 {
color: #fff;
padding-bottom: 20px;
}
.full img {
width: 100%;
margin-top: 4vw;
}
#projects {
position: relative;
float: left;
width: calc(100% - 80px);
margin-left: 80px;
padding: 0 4vw 6vw 2vw;
box-sizing: border-box;
}
.project {
position: relative;
float: left;
width: 50%;
line-height: 2;
padding: 1vw 2vw;
box-sizing: border-box;
text-decoration: none;
border-bottom: none;
}
.margined {
margin-bottom: 6vw;
}
.project:hover {
color: #303030;
border-bottom: none;
}
.project:hover .intro{
bottom: -3vw;
}
.karriere {
position: relative;
float: left;
width:calc(50% - 4vw);
line-height: 2;
padding: 2vw;
margin: 2vw;
box-sizing: border-box;
text-decoration: none;
border-bottom: none;
border-right: #fff 10px solid;
background: #f5f5f5;
margin-bottom: 6vw;
}
.karriere ul {
margin: 10px 0 10px 25px;
list-style:disc;
}
.karriere small {
font-size: 14px;
line-height: 18px;
margin: 0;
padding: 0;
display: block;
}
.karriere img {
width:calc(100% + 4vw);
margin: -2vw -2vw 2vw -2vw;
display: block;
}
.artikkel {
position: relative;
float: left;
width:calc(100% - 2vw);
line-height: 2;
padding: 2vw;
box-sizing: border-box;
text-decoration: none;
border-bottom: none;
border-right: #fff 10px solid;
background: #f5f5f5;
margin: 4vw 0;
}
.intro {
position: absolute;
left: 2vw;
bottom: -4vw;
width: 50%;
padding: 2vw;
margin: 2vw;
background: #303030;
color: #fff;
}
.intro p {
line-height: 1.1;
margin-bottom: 20px;
}
.tint {
position: relative;
background: #27AAFF;
}
.project:hover .tint img {
opacity: 0.2;
}
.project small{
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 0;
display: block;
min-height: 30px;
}
.project p{
padding: 0;
}
.project img{
width: 100%;
}
footer {
position: relative;
background: #f5f5f5;
width: calc(100% - 80px);
margin-left: 80px;
padding: 4vw 4vw 0 4vw;
font-size: 18px;
box-sizing: border-box;
}
.logos {
background: #fff;
}
.logos img{
height: 80px;
float: left;
margin: 0 50px 30px 0;
}
.text {
position: relative;
float: left;
width: 50%;
padding:0 8vw 6vw 0;
box-sizing: border-box;
}
.text small{
font-size: 11px;
line-height: 11px;
margin: -5vw 0 6vh;
padding: 0;
display: block;
}
.galleri {
position: relative;
float: left;
width: 50%;
padding:0 0 6vw 0;
box-sizing: border-box;
}
.galleri img {
width: 100%;
margin-bottom: 2vw;
}
.half {
position: relative;
float: left;
width: 50%;
padding:0 8vw 6vw 0;
box-sizing: border-box;
}
.tjenester {
font-size: 20px;
position: relative;
float: left;
width: 50%;
padding:2vw 8vw 2vw 0;
box-sizing: border-box;
}
.columned {
font-size: 18px;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
padding-bottom: 1vw;
}
.columned li {
list-style: none;
}
.ft-cleim {
position: absolute;
bottom: 0;
left: 0;
}
.clear {
clear:both;
}
.error {
background-color: #d75656;
color: #fff;
width: 800px;
padding: 10px;
margin:0;
font-size: 11px;
clear: both;
}
.success-box {
padding: 10px;
width: 800px;
margin-bottom: 20px;
background-color: #6FC666;
color: #fff;
}
table {
font-size: 12px;
width: 100%;
border-collapse: collapse;
}
th {
border: 1px #404040 solid;
background: #404040;
color: #fff;
padding: 5px;
}
td {
border: 1px #404040 solid;
padding: 5px;
}
@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width: 1024px) {
body {
font-size: 15px;
}
.page {
width: 100%;
margin-left: 0;
padding: 120px 14vw 8vw 8vw;
box-sizing: border-box;
}
header {
position: fixed;
height: 80px;
width: 80px;
top: 0;
left: 0;
background: #27AAFF;
z-index:2;
}
#menu, #kontakt{
right: -100vw;
width: 100vw;
}
#menu.open ,#kontakt.open {
width: 100vw;
}
#logo {
}
#kontakt {
font-size: 15px;
}
h1, h2 {
font-size: 24px;
padding-right: 0;
}
.half, .third, .tjenester, .text, .galleri {
width: 100%;
}
.text {
padding:0 0 6vw 0;
}
#projects {
width: 100%;
margin-left: 0;
padding: 0 12vw 6vw 6vw;
box-sizing: border-box;
}
.project {
width: 100%;
}
footer {
width: 100%;
margin-left: 0;
font-size: 15px;
box-sizing: border-box;
}
.ft-cleim {
margin: 50px 0;
position: relative;
}
.columned {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.karriere {
width: 100%;
}
.top .title {
position: relative;
margin: 0 0 6vw 0;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
.feed {
width: 76vw;
margin: 0 auto;
}
}
button {
background-color: #27AAFF;
padding: 0.25em 0.5em;
margin-bottom: 0.5em;
margin-right: 0.25em;
border: 2px #27AAFF solid;
border-radius: 0.2em;
color: #ffffff;
font-size: 1.2em;
}
button:hover {
cursor: pointer;
background-color: #27AAFF;
border: 2px #2088ff solid;
}
input[type="radio"] {
display: none;
}
input[type="text"] {
display: block;
padding: 0.25em 0.5em;
font-size: 1.1em;
margin-bottom: 0.5em;
}
textarea {
display: block;
padding: 0.25em 0.5em;
font-size: 1.1em;
margin-bottom: 0.5em;
}
label {
padding: 10px;
border: 1px #eeeeee solid;
border-radius: 3px;
margin-bottom: 0.25em;
display: block;
}
label.booking-label {
text-align: center;
font-size: 1.1em;
}
label.booking-label-disabled {
text-align: center;
font-size: 1.1em;
background-color: #efefef;
color: #cccccc;
}
label:hover {
cursor: pointer;
}
input[type="radio"]:checked+label {
font-weight: bold;
background-color: #efefef;
}
input.booking-input:checked+label {
font-weight: bold;
background-color: #27AAFF;
color: #ffffff;
}
input[type="radio"]:checked+label::before {
content: '>';
}
div.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
}
div.colheader {
background: #000000;
color: #ffffff;
text-align: center;
margin-bottom: 1em;
}
@media screen and (min-width: 1280px) {
div.grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}