@charset "utf-8";

/* Used fonts*/
@font-face {
  font-family: caviar;
  src: url(fonts/Caviar/CaviarDreams.ttf);
}

@font-face {
  font-family: bebas;
  src: url(fonts/Bebas/BebasNeue_Regular.otf);
}

@font-face {
  font-family: bebas;
  src: url(fonts/Bebas/BebasNeue_Bold.otf);
  font-weight: bold;
}

@font-face {
  font-family: robo;
  src: url(fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
  font-family: robo;
  src: url(fonts/Roboto/Roboto-Light.ttf);
  font-weight: light;
}

/* Standard config*/
html {
	font-family: robo;
	color: 	#202020;
	background-color: black;
	overflow-x: hidden;
}

/* Container for the entire website "body" like*/
#container {
	position: relative;
	left: -9px;
	top: -9px;
	width: 101.3%;
	background-color: white;
}
/* The the on the top, have picture and menu */
#header {
	position: relative;
	left: 0px;
	width: 100%;
	background-color: black;
	margin-bottom: 0.7%;
	box-shadow: 2px 2px 2px #888888;
	font-family: bebas;
	font-size: 1.5em;
	z-index: 50;
}

/* For the fixed part, logo and menu, on scroll*/
#head_fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: black;
	display: none;
	z-index: 100;
	font-family: bebas;
	font-size: 1.5em;
}
/* How much space from left side to logo in the header, not the fixed one */
a.header_img:link, a.header_img:visited, a.header_img:hover {	
	margin-left: 5%;
}

/* Container for the menu */
#header_nav_cont {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 60%;
	padding-right: 1%;
	padding-bottom: 1%;
}

/* link design */
a:link, a:visited, a:active {
	text-decoration: none;
	color: black;
	transition: color 0.2s ease; 
}

a:hover {
	color: #7f7f7f;
}
/*
a.head_butt:link, a.head_butt:visited {
	display: block;
	width: 5em;
	padding: 1%;
	text-align: center;
	color: #D0D0D0;
	float: right;
	margin-left: 0.5%;
	border: 1px solid black;
	transition: border 0.5s, background-color 0.5s;
}

a.head_butt:hover, a.head_butt:active {
	border-left: 1px solid #F0F0F0;
	border-right: 1px solid #F0F0F0;
	color: white;
	background-color: #101010;
}

.selected{
	background-color: #101010;
} */


/* yellow: #FFD700*/

/* kind of "main/body" container for the text, there you write stuff*/
#body {	
	position: relative;
	left: 0px;
	width: 80%;
	margin: auto;
	background-color: white;
	overflow: hidden;	
	font-size: 1.2em;
}

/* It is suppose to be empty! It's the container that wraps the two columns, left and right column */
#column_cont {
	
}

div.left_cont {
	float: left;
	width: 60%;
}

div.right_cont {
	float: right;
	width: 38%;
	margin-top: 0.4%;
}

/* id and classes for the foot (bottom part) */
#foot {
	position: relative;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: black;
	color: white;
	margin-top: 1%;
	padding-top: 2%;
}

div.fb_center_img {
    display: block;
	width: 4%;
    margin: auto; 
}

div.foot_img {	
    margin: auto;
	width:60%;
}

img.up_arrow {
	position: fixed; 
	right: 2%; 
	bottom: 2%; 
	z-index: 100;
	transition: opacity 0.2s;
}

img.up_arrow:hover {
	opacity: 0.5;
}

/* Title texts, different sizes*/
h3 {
	font-family: bebas;
	font-size: 2em;
	margin-bottom: 2%;
}

h4 {
	font-family: bebas;
	font-size: 1.5em;
	margin-bottom: 2%;
}

/* For "styrelsen" page */
#styr_cont {
	float: left;
	width: 100%;
	padding-right:5%;
	margin-bottom: 1%;
}

/* classes for text to slider */
div.slide_tk_text {
  font-family: bebas;
  position: absolute;
  left: 45%;
  top: 50%;
  width: auto;
  margin-top: -2%;
  color: white;
  font-weight: bold;
  font-size: 3em;
}

div.slide_ub_text {
  font-family: caviar;
  position: absolute;  
  width: auto;
  margin-top: -2%;
  color: white;
  font-size: 3em;
}

/* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('slider/img/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('slider/img/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }

		
/* MENU CODE START HERE */
/* #cssmenu is the main "container", ul is the list and il is the "point" in the list. Look at ordinary html <ul> <il> if you don't know
how it looks like. ::after always occure after the ul point, ::before alway occur before the ul point. Samt goes for il. It is like
::hover, ::active and so on for links.*/
#cssmenu {
  background: black;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  font-family: bebas;  
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  transition: background 1s, background-color 1s;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-box-sizing: border-box; /*So the subsection fit*/
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  /*The subsections dropdown animation*/
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  
  background: #101010; /* The sub section background */
}
/* dropdown menu*/
#cssmenu ul li ul li a {
  font-size: 1em;
  text-transform: none;
  color: #c9c9c9;
  letter-spacing: 0;
  display: block;
  width: 170px;
  padding: 11px 10px 11px 20px;
  transition: color 0.6s, background-color 0.6s;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: white;
  background: #252525; /*Background color sub-section hover*/
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #868686;
  color: white;
}
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}

#cssmenu > ul > li {
  float: right; /* position of menu inside header_nav_cont */
}
/*
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
} */
#cssmenu > ul > li:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 0;
  background: #101010; /* Background-color hover button*/
}

#cssmenu > ul > li > a {
  color: #c9c9c9; /* Text color for hover button */
  padding: 15px 20px;
  letter-spacing: 1px;
  /*text-transform: uppercase;*/
  font-size: 1.1em;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: white;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block;
}
#cssmenu > ul > li {
  width: auto;
}
#cssmenu > ul > li > ul {
  width: 170px;
  display: block;
}
#cssmenu > ul > li > ul > li {
  width: 170px;
  display: block;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  #cssmenu > ul > li > ul {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }
  #cssmenu ul li ul li a {
    width: 100%;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu.align-center > ul > li {
    display: block;
  }
  #cssmenu > ul.open {
    max-height: 1000px;
    border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
    width: 100%;
  }
  #cssmenu ul > li {
    float: none;
    width: 100%;
  }
  #cssmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
  }
  #cssmenu ul > li:after {
    display: none;
  }
  
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  #cssmenu ul li ul li a {
    padding: 8px 20px 8px 35px;
    color: #ffffff;
  }
  #cssmenu ul li ul ul li a {
    padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover > a {
    color: #000000;
  }
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 20px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: #c5c5c5;
    cursor: pointer;
  }
  #cssmenu #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }
  #cssmenu #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }
}