@charset "UTF-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	margin:0;
	padding:0;
	scroll-behavior: smooth;
    overflow-x: hidden; //horizontal
    overflow-y: scroll; //vertical

}
body {
font:17px/22px 'metrolight', sans-serif;
color:#ececec;
background:#000;
font-weight:normal;
background-image: url("../img/dack-bakgrund.jpg");
background-position: center 5vh;
background-size:100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
#wowslider-container2 {
display:none;
}
#wrapper {
width:70vw;
max-width:1280px;
margin:auto;
background:rgba(0,0,0,0.6);

}
.knapp {
text-align: center;
display: block;
cursor: pointer;
width: 100%;
max-height: 50px;
padding: 8px 16px;
background-color: #f3a200;
color: #000;
font-size: 18px;
font-weight: 400;
line-height:1; font-family:'metromedium', sans-serif;
text-decoration: none;
border-radius: 5px;
transition:all .3s ease;
}
.knapp:hover {
background-color: #333;
color: #f3a200;
}
.knapp-butik {
margin-left:0;
}
#knapp-butik-bild {
float:none;
width:10vw;
margin-left:0;
}
.knapp-butik-mobil {
display:none;
}
.content-wide .knapp {
width: 50%;
}

#logo {
width: 15vw;
height:auto;
margin:2vh 0;
}
#footer {
width:100%;
background-image: linear-gradient(to bottom, #000000, #111111, #1b1b1b, #252525, #303030);
color:#ffaa00;
text-align:center;
padding: 5vh 0;
}
#footer a {
color:#ffaa00;
}
#footer a:hover {
color:#ffd200;
}
#logo-footer {
width: 10vw;
height:auto;
}
#content{
width:100%;
padding: 0 4vw 10vh 4vw;
margin:0 auto;

}
.content-wide {
margin:8vh auto 0 auto;
padding:0 0 8vh 0;
width:100%;
clear:both;
border-bottom:1px dotted #b28900;
}


.content-wide-columns {
margin:8vh auto 0 auto;
padding:0 0 8vh 0;
width:100%;
clear:both;
border-bottom:1px dotted #b28900;
}
.content-wide img {
height:auto;
width:23vw;
margin-bottom:1vh;
float:right;
}
.content-wide p {
margin-right:26vw;
text-align:justify;
}
.content-wide h1, .content-wide-columns h1, .personal h1 {
background:#333;
padding:.3em;
margin-bottom:.7em;
text-shadow:2px 2px #000;
}
h2 {
font-family: 'metroblack', sans-serif;
text-transform: uppercase;
color:#f3a200;
font-size:1em;
line-height:1;
margin-bottom:0.4em;
font-weight:100;
}
p {
margin-bottom:18px;
}
h1 {
font-family: 'metroblack', sans-serif;
text-transform: uppercase;
color:#f3a200;
font-size:1.5em;
line-height:1;
margin-bottom:0.4em;
font-weight:100;
}
p a {
color:#ececec;
text-decoration:none;
border-bottom:1px dotted #777;
}
p a:hover {
color:#ffaa00;
border-bottom:none;
text-decoration:underline;
}

.columns {
width:100%;
padding-top:6vh;
}
.column1 {
width:28%;
float:left;
}
.column1 img {
width:90%;
height:auto;

}
.column2 img {
width:90%;
height:auto;

}
.column3 img {
width:90%;
height:auto;

}
.column2 {
border-left:1px dotted #b28900;
border-right:1px dotted #b28900;
width:36%;
padding:0 4%;
margin:0 4%;
float:left;
}
.column3 {
width:28%;
float:left;
}


.personal {
width:100%;
padding-top:2vh;
}
.personal1 {
width:28%;
float:left;
}
.personal1 img {
width:100%;
height:auto;
}
.personal2 {
width:36%;
padding:0 4%;
margin:0 4%;
float:left;
}
.personal2 img {
width:100%;
height:auto;
}
.personal3 {
width:28%;
float:left;
}
.personal3 img {
width:100%;
height:auto;

}


#prislista {
width:50%;;
background:#111;
border-collapse:collapse;
margin: 1vh 0 2vh 0;
}
#prislista-header {
background:#222;
}
#prislista th {
text-align:left;
padding: 0.1em 0.5em;
border:1px solid #333;
}
#prislista td {
padding: 0.1em 0.5em;
text-align:left;
border:1px solid #333;
}

.clear {
clear:both;
height:0;
}

#proformica {
margin:5vh auto;;
color:#666;
text-align:center;
margin:auto;
}
#proformica a {
color:#666;
border:#444;
}
#proformica a:hover {
color:#ffaa00;
}

.dack-logos {
width:48%;
float:right;
}
.dack-logos img {
width:28%;
float:right;
margin:0 0 2vh 1vw;
}

.icons {
width:0.9em!important;
height:auto;
margin-bottom: -0.2em;
}
.partners {
}
.partners img {
float:left;
margin:0;
width:150px;
}

/* fonter */


@font-face {
font-family: 'metroblack';
src: url('fonts/metropolis-black-webfont.woff2') format('woff2'),
	url('fonts/metropolis-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'metromedium';
src: url('fonts/metropolis-medium-webfont.woff2') format('woff2'),
	url('fonts/metropolis-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'metrolight';
src: url('fonts/metropolis-light-webfont.woff2') format('woff2'),
	url('fonts/metropolis-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}