@CHARSET "UTF-8";

/***********GLOBAL*****************/
/*
 * light: #6da5c9
 * light2: #4485af
 * main color: #28709f
 * dark: #0f5b8d
 * dark2 (secondary color): #07456e
 */
 html {
   box-sizing: border-box;
   font-size: 16px;
 }
 *, *:before, *:after {
   box-sizing: inherit;
   color: #777;
   margin: 0 auto;
 }

body{
	background: #ffffff;
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
  font-size: 1.1em;
  min-height: 100%;
  padding-bottom: 80px;
}
h1, h2, h3{
  font-family: 'Oxygen', sans-serif;
  font-weight: 400;
}
h2{
  font-size: 1.2em;
  color: #07456e;
}
h3{
  font-size: 1.1em;
}

.left{
  float: left;
}

.right{
  float: right;
}

.clear{
  clear: both;
}

@media screen and (max-width:680px){
  .left, .right{
    float: none;
  }
}

table tr:nth-child(even){
  background-color: #eaeaef;
}
table td:nth-child(odd){
  color: #07456e;
}

/*********!GLOBAL*****************/

/***********MENU******************/
nav{
  display: block;
  width: 100%;
  background: #fff;
  box-shadow: 0px 2px 4px #ccc;
  height: 6em;
  font-size: 1em;
  position: relative;
  z-index: 20;
}
/*Company logo*/
#logo {
  display: block;
  float: left;
  height:100%;
  padding: 10px;
}
#logo img{
  height:100%;
}
/*Page title*/
nav h1{
  color:#07456e;
  position: absolute;
  bottom: 0.85em;
  left: 8.5em;
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5em;
}
@media screen and (max-width:450px) {
  nav h1{
    left: 6em;
  }
}
/* Main menu */
#menu, #menu_a {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   position: relative;
   z-index: 10;
}

/* Float the list items side by side */
#menu li {
  float: left;
}

/* Style the links inside the list items */
#menu li a, #menuIcon {
   display: inline-block;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   color: inherit;
   transition: 0.3s;
   font-size: 1em;
   text-transform: uppercase;
}
#menu li a {
  border-bottom: 1px solid #fff;
}
/* Change background color of links on hover */
#menu li a:hover {
  border-color: #07456e;
  color: #07456e;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
#menuIcon {
   display: none;
 }

/* Search box*/
#menu form{
 width: 11em;
 height: 2.5em;
 overflow: hidden;
 padding-top: 0.5em;
 padding-bottom: 0.3em;
 margin-right: 0.8em;
}

#menu input{
 margin:0;
 padding:0;
 border:none;
 border-bottom: 1px solid #07456e;
 display: block;
 float: left;
 height:100%;

 color: #07456e;
}

#menu input[type=text]{
 width: 85%;
 padding-left: 1em;

}
#menu input[type=submit]{
 width:15%;
 font-size: 1.3em;
 background-color: #fff;
}

.flag {
  width: 3.5em;
  padding: 0;
  overflow: hidden;
  margin-top: 0.7em;
  margin-left: 0.5em;
  display: block;
  color: #07456e;
}
.flag:hover{
  font-weight: bold;
  cursor: pointer;
}
.flag.hidden{
  display: none;
}
#menu:not(.expanded) li.right{
  float:right;
}

/* When the screen is less than ... pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1160px) {
 #menu li {
  display: none;
 }
 #menuIcon {
  float: right;
  display: block;
 }
 #menu.expanded {
  position: relative;
  clear: both;
 }
 #menuIcon.expanded{
   position: absolute;
   right: 0;
   top: 0;
 }
 #menu.expanded li {
   float: none;
   display: block;
   background-color: #07456e;
 }
 #menu.expanded li a:hover {
   background-color: #28709f;
 }
 #menu.expanded li a {
   display: block;
   text-align: center;
   color: #f2f2f2;
   border: 0px;
 }
 #menu.expanded .flag{
   margin:0 auto;
   margin-top:10px;
   margin-bottom:10px;
   color: #fff;
   width: auto;
   text-align: center;
 }
 #menu.expanded .right{
   overflow:hidden;
 }
 #menu form{
   margin: auto;
 }
}

/**************!MENU***************/

/*************HEADLINE*************/
#headline{
  width:100%;
  padding: 10px;
}
/*************!HEADLINE*************/

/*************LIST PAGE****************/
.cont{
  max-width: 1300px;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.real, .list_it {
  position:relative;
  padding:0;
  margin: 0 auto;
  margin-bottom: 15px;
  margin-top: 10px;
  width:100%;
  overflow: hidden;
  /*box-shadow: 0 2px 4px #ccc;*/
}

.real{
  height: 17em;
  width: 100%;
  float: left;
}

.list_it{
  display:block;
  background-color: #fff;
  color: inherit;/*#444;*/
  padding: 15px;
  padding-bottom: 25px;
  border-bottom: 1px #f0f0f0 solid;
}
.list_it:hover{
  border-bottom: 1px #e0e0e0 solid;
}
.list_it a{
  text-decoration: none;
  background-color: #f0f0f0;
  color: #07456e;
}

.list_it h2{
  clear:both;
  display: block;
  margin-bottom: 0.2em;
}
.list_it h3{
  clear:both;
  display: block;
  margin-bottom: 0.2em;
  margin-left: 0.5em;
}
.list_it img{
  display:block;
  margin:0 auto;
  max-width: 400px;
  max-height: 400px;
  overflow: hidden;
}
.list_it .tekst{
  margin-top: 0.2em;
}
.real img{
  /*width:100%;*/
  display: block;
  height: 100%;
  margin: auto;
  margin-left:50%;
  transform: translateX(-50%);
  /*overflow:hidden;*/
}
.real a{
  display: block;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 0.3s;
  text-decoration: none;
  padding: 5%;
}
.real a:hover{
  opacity: 1;
}

.real h2{
  margin-top: 50%;
  transform: translateY(-50%);
  color: #fff;
  }

@media only screen and (min-width: 680px){
  .real{
    margin: 0.5%;
    width: 49%;
  }
}
@media only screen and (min-width: 810px){
  .list_it img{
    float: right;
    max-width:40%;
  }
  .list_it .tekst, .list_it h2{
    float: left;
    width:60%;
  }
  .list_it{
    width:800px;
  }
}
@media only screen and (min-width: 1130px){
  .real{
    margin: 0.5%;
    width: 32%;
  }

}
/***********CONTACT PAGE***********/
.contact, .about{
  max-width: 1000px;
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
  margin-top: 10px;
  /*box-shadow: 0px 2px 4px #ccc;*/
  padding: 15px;
}

.contact .left{
  margin-right: 80px;
}

.contact .right{
  float: left;
}

.contact h2{
  clear: both;
  margin-bottom: 5px;
}

.contact p{
  margin-bottom: 35px;
  margin-left: 50px;
}
@media only screen and (min-width: 900px){
  .about div{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    width:80%;
    margin:auto;
    margin-top: 15px;
  }
}
.about img{
  clear:both;
  width: 80%;
  margin-left:10%;
  margin-top: 15px;
}
/***************MAP****************/
iframe{
  width: 100%;
  /*height: 600px;*/
}

/**********DEVICES****************/
#groupList{
  display:block;
  max-width: 1000px;
}
#groupList{
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
}
#groupList li {
  float: left;
}

/* Style the links inside the list items */
#groupList li a{
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   width: 300px;
   margin: 10px;
   padding: 14px 16px;
   text-decoration: none;
   transition: 0.3s;
   font-size: 1em;
   background-color: #fff;
   border-bottom: 1px #f0f0f0 solid;
   transition: 0.3s;
   /*box-shadow: 0 2px 4px #ccc;*/

}

#groupList li h3{
   color: #28709f; /*#eee;*/
   transition: 0.3s;
}
#groupList li a:hover h3{
  /*font-weight: 600;*/
  color: #07456e;
}
#groupList li p{
  display: block;
  height: 90px;
}
/* Change background color of links on hover */
#groupList li a:hover {
  /* background-color: #fffefd; */
  border-bottom: 1px #d0d0d0 solid;
}

#groupList img{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
/********SINGLE DEVICE************/
.page h2{
  margin-bottom: 0.5em;
}

.page h3{
  margin-top: 3em;
  margin-bottom: 1em;
}

.page{
  margin: 0 auto;
  padding: 1%;
  max-width: 1000px;
  background: #fff;
  overflow: hidden;
  z-index: -1;
}

.technical table{
  width: 100%;
  border-collapse: collapse;
}

.technical td{
  padding:10px;
}

.technical td:first-child{
  text-align: right;
  width: 48%;
  padding-right: 15px;
}
/**********DOWNLOAD ITEMS******/
.dnl_item{
  width: 90%;
  background: #fff;
  overflow: hidden;
  /*box-shadow: 0 2px 2px -1px #444;*/
  border-bottom: 1px solid #ddd;
  margin-bottom: 5px;
}
.ver_item{
  width: 100%;
  overflow: hidden;
  clear: both;
  padding: 5px;
  color: #eee;
  position: relative;
}

.ver_item div{
  min-height: 1em;
  display: block;
  float: left;
  text-decoration: none;

}
.v_icon{
  margin-right: 0.5em;
}
.v_name{
  width: 25%;
  color: #07456e;
}
.v_num{
  width: 15%;
}
.v_desc{
  width: 40%;
}
div.v_exp{
  width: 10px;
  cursor: pointer;
  float: right;
  position: absolute;
  right: 5px;
  bottom: 0;
}
.ver_item.archive{
  background: #fcfcfc;
  box-shadow: inset 0 4px 2px -4px #999;
  color: #666;
  display: none;
}
.download h4{
  margin-top: 15px;
  margin-bottom: 10px;
}

/********GALLERY******************/
#gallery{
  position:relative;
  border: solid 1px #f0f0f0;
}

#mainImg, #mainFilm{
  max-width: 90%;
  max-height: 600px;
  margin: 0 auto;
  display: block;
}
.movable{
  border-top: solid 1px #f0f0f0;
  position: relative;
  overflow: hidden;
  /*background-color: #444;*/

}
.thumbnails{
  position: relative;
  height: 100px;
  overflow: visible;
}

.thumbnails img{
  position:relative;
  height: 100px;
  margin-right: 5px;

}
.move_left,
.move_right {
  cursor: pointer;
  position: absolute;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 16px;
  padding-top: 37px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
  z-index: 5;
}
.move_right{
  right: 0;
  top:0;
}
.move_left:hover,
.move_right:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/************MODAL****************/
/* The Modal (background) */
#myModal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 3%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  height: 95%;
  max-width: 1200px;
  max-height: 100%;
}

/* The Close Button */
#closeModal {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  z-index: 101;
}

#closeModal:hover,
#closeModal:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next{
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "prev button" to the left */
.prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#imgBig{
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/*******SOCIAL MEDIA**************/
#smContainer{
  width: 50px;
  height: auto;
  position: fixed;
  right: 0px;
  bottom:0;
  padding: 3px;
  margin: 0;
  z-index: 98;
}
#smContainer a{
  padding: 0;
  margin:0;
}
#smContainer a img{
  margin: 4px;
}
#smContainer a img.color{
  display: none;
}
#smContainer a img.bw{
  display: block;
}
#smContainer a:hover img.color{
  display: block;
}
#smContainer a:hover img.bw{
  display: none;
}
/**********FOOTER*****************/
#foot{
  height: 60px;
  width: 100%;
  margin: 0;
  background-color: #28709f;
  font-size: 0.8em;
  padding-top: 10px;
  box-shadow: inset 0 6px 6px -6px #555;
  text-align: center;
  clear:both;
  position: absolute;
  bottom: 0;
}

#foot p{
  color: #eee;
}

/* Cookie warning */
#cookie-warn{
    position: fixed;
    bottom: 0;
    background: #EEE;
    margin: 0;
    padding: 15px;
    width: 100%;
    display: none;
    z-index: 99;
}

#cookie-warn a{
    color: #07456e;
    text-transform: uppercase;
    float: right;
    padding-right: 20px;
}

#cookie-warn p{
    font-size: 0.9em;
    color: #333;
}

/*******************ADMIN************/
#aForm{
  width: 400px;
  display: block;
  margin: auto;
  padding:10px;
  margin-top: 50px;
  background-color: #07456e;
  box-shadow: 0 2px 6px #bbb;
  text-align: right;

}
#aForm p{
  display: block;
  clear: both;
    color: #eee;
}
#tech_data{
  width:100%;
}
#tech_data td:nth-child(4) input{
  width:100px;
}
.select-param{
  width: 200px;
}
#param_model{
  /*visibility: hidden;*/
  display: none;
}

#new_dev{
  border: 1px solid #f00;
}