@font-face {
     font-family: Inconsolata;
     src: url('../fonts/Inconsolata-Regular.ttf');
}
 @font-face {
     font-family: Varela;
     src: url('../fonts/Varela-Regular.ttf');
}
 article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
     display:block 
}
 html{
     font-family:'Varela', sans-serif;
     font-size:16px;
     line-height:24px;
     -ms-text-size-adjust:100%;
     -webkit-text-size-adjust:100%;
     font-smooth:always;
     -webkit-font-smoothing:antialiased 
}
 body{
     margin:0;
     background:#fefefe;
     color:#333;
     width:100% 
}
 a{
     color:#0080c0;
     text-decoration:none;
     background:transparent 
}
 a:focus{
     outline:thin dotted 
}
 a:active,a:hover{
     outline:0;
     text-decoration:underline 
}
 h1{
     font-size:2em;
     margin:0.67em 0 
}
 code,kbd,pre,samp{
     font-family:monospace,serif;
     font-size:1em 
}
 pre{
     white-space:pre-wrap;
     font-family:"Inconsolata", sans-serif;
     line-height:1.1rem 
}
 img{
     border:0 
}
 button,input,select,textarea{
     font-family:inherit;
     font-size:100%;
     margin:0 
}
 button,input{
     line-height:normal 
}
 button,select{
     text-transform:none 
}
 button,html input[type="button"],input[type="reset"],input[type="submit"]{
     -webkit-appearance:button;
     cursor:pointer 
}
 textarea{
     overflow:auto;
     vertical-align:top 
}
 table{
     border-collapse:collapse;
     border-spacing:0 
}
 ul{
     list-style:none 
}
 *,*:before,*:after{
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box 
}
/* SECTION */
 .ascensor {
     position: absolute;
     overflow: hidden;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100% 
}
 .section {
     position: absolute;
     overflow: auto;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
}
 .forside {
     transform: translateY(100%) translateX(0%) 
}
 .kontakt {
     transform: translateY(200%) translateX(100%) 
}
 .teknik {
     transform: translateY(200%) translateX(100%) 
}
 .tidslinje {
     transform: translateY(200%) translateX(200%) 
}
 .konsulent {
     transform: translateY(200%) translateX(300%) 
}
 .kode {
     transform: translateY(100%) translateX(300%) 
}
 .om {
     transform: translateY(0%) translateX(300%) 
}
/* CONTENT */
 .container{
     padding:12px;
     max-width:900px;
     width:100%;
     margin:0 auto;
     padding-top:10%; /* Whitespace afstand til top. 120px */
     padding-bottom:120px /* Whitespace afstand til menu ved scroll til bund. 120px */
}
 h1 img{
     max-width:500px 
}
 code{
     background-color:#eee;
     padding:2px 7px;
     border-radius:3px 
}
 a.button{
     background-color:#0080c0;
     color:#fefefe;
     border-radius:3px;
     padding:6px 12px;
     display:inline-block 
}
 a.button:hover{
     background-color:#65b7e7;
     text-decoration:none !important 
}
 a.button.grey{
     background-color:#eee;
     color:#222 
}
 a.button.grey:hover{
     background-color:#fbfbfb 
}
/* KONTAKT */
 .imgicon {
     vertical-align:middle 
}
 .email {
    color:#000000
}
 .pgp {
    color:#808080
}
 .sdu {	
    color:#789d4a
}
 .linkedin {
    color:#007ab9
}
/* MENU */
 .links-to-floor{
     position:absolute;
     bottom:0;
     right:20px;
     z-index:20;
     width:240px;
     height:80px 
}
 .links-to-floor li{
     position:absolute;
     width:60px;
     height:40px;
     padding:3px;
     line-height:40px 
}
 .links-to-floor li span{
     width:100%;
     height:100%;
     display:block;
     background-color:#0080c0;
     text-align:center;
     color:#ffffff;
     line-height:33px;
     font-size:22px;
     cursor:pointer 
}
 .links-to-floor li.selected span{
     background-color:#808080;
     color:#eee 
}
 .links-to-floor li.ascensorLink0{
     top:0;
     left:0 
}
 .links-to-floor li.ascensorLink1{
     top:0%;
     left:25% 
}
 .links-to-floor li.ascensorLink2{
     top:50%;
     left:25% 
}
 .links-to-floor li.ascensorLink3{
     top:50%;
     left:50% 
}
 .links-to-floor li.ascensorLink4{
     top:50%;
     left:75% 
}
 .links-to-floor li.ascensorLink5{
     top:0%;
     left:75% 
}
 .links-to-floor li.ascensorLink6{
     top:-50%;
     left:75% 
}
 @media screen and (min-width: 0px) and (max-width: 0px){
    /* max-width: 720px */
     .container{
         padding-top:20px;
    }
}

/* Teknik float */
 .blox {
     width:100%;
     display:inline-block;
}
 .blox > .left {
     width:100%;
     float:left;
}
 .blox > .right {
     min-width:100px;
     width:100%;
     float:left;
}


/* GAUGES */
 .gauge-container-left {
     width: 225px;
     height: 225px;
     text-align: center;
     margin: auto 30px auto;
     font-size:1.1em;
     float:left;
     font-smooth:always;
     -webkit-font-smoothing:antialiased;
     font-family:'Varela', sans-serif;
     line-height:24px;
     font-weight:bold;
}
 .gauge-container-inline {
     width: 225px;
     height: 225px;
     text-align: center;
     margin: auto 30px auto;
     font-size:1.1em;
     display:inline-block;
     font-smooth:always;
     -webkit-font-smoothing:antialiased;
     font-family:'Varela', sans-serif;
     line-height:24px;
     font-weight:bold;
}
 .gauge-container-right {
     width: 225px;
     height: 225px;
     text-align: center;
     margin: auto 30px auto;
     font-size:1.1em;
     float:left;
     font-smooth:always;
     -webkit-font-smoothing:antialiased;
     font-family:'Varela', sans-serif;
     line-height:24px;
     font-weight:bold;
}
 .gauge {
     width: 200px;
     height: 200px;
     margin: 0 auto 0;
}
/* COLLAPSIBLE */
 .collapsible {
     background-color: #eee;
     color: #444;
     cursor: pointer;
     padding: 10px;
     width: 100%;
     border: none;
     text-align: left;
     outline: none;
     font-size: 20px;
     font-family:sans-serif;
     -ms-text-size-adjust:100%;
     -webkit-text-size-adjust:100% 
}
 .active, .collapsible:hover {
     background-color: #ccc;
}
 .content {
     padding: 0 15px;
     background-color: #f1f1f1;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
}
 .collapsible:after {
     content: "[" '\02795' "]";    
     font-size: 13px;
     color: gray;
     float:right;
     margin-right: 7px;
     margin-left: 5px;
     margin-top: 2px;
}
 .active:after {
     content: "[" "\2796" "]";    
}
/* TIMELINE */
 .timeline {
     position: relative;
     width: 650px;
     margin: 0 auto;
     margin-top: 20px;
     padding: 1em 0;
     list-style-type: none;
}
 .timeline:before {
     position: absolute;
     left: 50%;
     top: 0;
     content: ' ';
     display: block;
     width: 6px;
     height: 100%;
     margin-left: -3px;
     background: rgb(80,80,80);
     background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
     background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
     background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
     background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
     background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
     z-index: 5;
}
 .timeline li {
     padding: 1em 0;
}
 .timeline li:after {
     content: "";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 .direction-l {
     position: relative;
     width: 300px;
     float: left;
     text-align: right;
}
 .direction-r {
     position: relative;
     width: 300px;
     float: right;
}
 .flag-wrapper {
     position: relative;
     display: inline-block;
     text-align: center;
}
 .flag {
     position: relative;
     display: inline;
     background: rgb(248,248,248);
     padding: 6px 10px;
     border-radius: 5px;
     font-weight: 600;
     text-align: left;
}
 .direction-l .flag {
     -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
     -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
     box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
 .direction-r .flag {
     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
     -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
     box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
 .direction-l .flag:before, .direction-r .flag:before {
     position: absolute;
     top: 50%;
     right: -35px;
     content: ' ';
     display: block;
     width: 20px;
     height: 20px;
     margin-top: -10px;
     background: #fff;
     border-radius: 10px;
     border: 4px solid rgb(0,128,192);
     z-index: 10;
}
 .direction-r .flag:before {
     left: -35px;
}
 .direction-l .flag:after {
     content: "";
     position: absolute;
     left: 100%;
     top: 50%;
     height: 0;
     width: 0;
     margin-top: -8px;
     border: solid transparent;
     border-left-color: rgb(248,248,248);
     border-width: 8px;
     pointer-events: none;
}
 .direction-r .flag:after {
     content: "";
     position: absolute;
     right: 100%;
     top: 50%;
     height: 0;
     width: 0;
     margin-top: -8px;
     border: solid transparent;
     border-right-color: rgb(248,248,248);
     border-width: 8px;
     pointer-events: none;
}
 .time-wrapper {
     display: inline;
     line-height: 1em;
     font-size: 0.66666em;
     color: rgb(0,128,192);
     vertical-align: middle;
}
 .direction-l .time-wrapper {
     float: left;
}
 .direction-r .time-wrapper {
     float: right;
}
 .time {
     display: inline-block;
     padding: 4px 6px;
     background: rgb(248,248,248);
}
 .desc {
     margin: 1em 0.75em 0 0;
     font-size: 0.77777em;
     font-style: italic;
     line-height: 1.5em;
}
 .direction-r .desc {
     margin: 1em 0 0 0.75em;
}
/* Media queries */
 @media screen and (max-width: 660px) {
     .timeline {
         width: 100%;
         padding: 4em 0 1em 0;
    }
     .timeline li {
         padding: 2em 0;
    }
     .direction-l, .direction-r {
         float: none;
         width: 100%;
         text-align: center;
    }
     .flag-wrapper {
         text-align: center;
    }
     .flag {
         background: rgb(248,248,248);
         z-index: 15;
    }
    /* Resized */
     .direction-l .flag:before, .direction-r .flag:before {
         position: absolute;
         top: -30px;
         left: 50%;
         content: ' ';
         display: block;
         width: 14px;
         height: 14px;
         margin-left: -7px;
         background: #fff;
         border-radius: 10px;
         border: 4px solid rgb(0,128,192);
         z-index: 10;
    }
     .direction-l .flag:after, .direction-r .flag:after {
         content: "";
         position: absolute;
         left: 50%;
         top: -8px;
         height: 0;
         width: 0;
         margin-left: -8px;
         border: solid transparent;
         border-bottom-color: rgb(248,248,248);
         border-width: 8px;
         pointer-events: none;
    }
     .time-wrapper {
         display: block;
         position: relative;
         margin: 4px 0 0 0;
         z-index: 14;
    }
     .direction-l .time-wrapper {
         float: none;
    }
     .direction-r .time-wrapper {
         float: none;
    }
     .desc {
         position: relative;
         margin: 1em 0 0 0;
         padding: 1em;
         background: rgb(245,245,245);
         -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
         -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
         box-shadow: 0 0 1px rgba(0,0,0,0.20);
         z-index: 15;
    }
     .direction-l .desc, .direction-r .desc {
         position: relative;
         margin: 1em 1em 0 1em;
         padding: 1em;
         z-index: 15;
    }
}
 /*@media screen and (min-width: 400px ?? max-width: 660px) {
     .direction-l .desc, .direction-r .desc {
         margin: 1em 4em 0 4em;
    }
}*/
 .responsive {
     max-width: 100%;
     height: auto;
     width: auto\9;
    /* ie8 */
}
/* Float the profile picture on resize */
 .block {
     width:100%;
     display:inline-block;
}
 .block > .fiftyL {
     width:50%;
     float:left;
}
 .block > .fiftyR {
     min-width:100px;
     width:50%;
     float:left;
}