/******************************* FONTFACE *******************************/
@font-face {
    font-family:"SW-Link";
    src: url('../fonts/SWLink/swlink-webfont.eot');
    src: url('../fonts/SWLink/swlink-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SWLink/swlink-webfont.woff') format('woff'),
         url('../fonts/SWLink/swlink-webfont.ttf') format('truetype'),
         url('../fonts/SWLink/swlink-webfont.svg#swlinkregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:"LatoHairline";
    src:url('../fonts/Lato/Lato-Hairline.eot?') format('embedded-opentype');
    src:url('../fonts/Lato/Lato-Hairline.woff') format('woff');
    src:url('../fonts/Lato/Lato-Hairline.ttf') format('truetype');
}

@font-face {
    font-family:"LatoLight";
    src:url('../fonts/Lato/Lato-Light.eot?') format('embedded-opentype');
    src:url('../fonts/Lato/Lato-Light.woff') format('woff');
    src:url('../fonts/Lato/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family:"LatoRegular";
    src:url('../fonts/Lato/Lato-Regular.eot?') format('embedded-opentype');
    src:url('../fonts/Lato/Lato-Regular.woff') format('woff');
    src:url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family:"PoiretOneRegular";
    src:url('../fonts/PoiretOne/PoiretOne-Regular.eot?') format('embedded-opentype');
    src:url('../fonts/PoiretOne/PoiretOne-Regular.woff') format('woff');
    src:url('../fonts/PoiretOne/PoiretOne-Regular.ttf') format('truetype');
}

@font-face {
    font-family:"RalewayThin";
    src:url('../fonts/Raleway/Raleway-Thin.eot?') format('embedded-opentype');
    src:url('../fonts/Raleway/Raleway-Thin.woff') format('woff');
    src:url('../fonts/Raleway/Raleway-Thin.ttf') format('truetype');
}

/******************************* GENERAL *******************************/
/* Clearing defaults */
* {
    padding:0px;            /* No padding, border or margin */
    border:0px;
    margin:0px;
    background:none;        /* No backgrounds or outlines (buttons etc.) */
    outline:none;
    font-family:inherit;    /* Font-family, size and color is always inherited */
    font-size:inherit;
    color:inherit;      
}

html {
    height:100%;
}

body {
    background-color:#282828;
    color:#d8dee4;
    height:100%;
    font-size:12pt;
    font-family:LatoRegular, Lato, "Trebuchet MS", Helvetica, sans-serif;
}

/* Headings size are based on base size (body) */
h1, h2{
    font-family:LatoHairline, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-size:2.6em;
    text-shadow: 0px 0px 10px black;
}

h3 {
    font-family:LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-size:2em;
}

h4 {
    font-size:1.4em;
}

h1, h2, h3, .date {
    color:#349bb9;
}

/* No decoration on anchors. Anchors are orange and have hover/focus glow,
   if they are nesten in p-tag or another tag marked with class "link_container" */
a {
    text-decoration:none;
}

.link_container a, p a {
    cursor: pointer;
    color: #E06D50;
}

.link_container a:hover, .link_container a:focus, p a:hover, p a:focus {
    color:white;
    text-shadow:0px 0px 5px white;
}

/* Buttons have mouse pointer */
button {
    cursor: pointer;
}

/* Removing mozilla border on buttons */
button::-moz-focus-inner {      
    border:0px;
    padding:0px;
}

/* Remove default styling on lists */
ul {
    list-style:none;
}

.w960 {
    width:940px;
    padding:10px;
    margin:auto;
}

.clearboth {
    clear:both;
}

/******************************* HEADER *******************************/
header {
    height: 55%;
    width: 100%;
    position: fixed;
    top: 0px;
    background: #212121;
    background: -moz-linear-gradient(#000000, #212121); /* FireFox */
    background: -webkit-linear-gradient(#000000, #212121); /* Chrome, Safari */
    background: -o-linear-gradient(#000000, #212121); /* Opera */
    background: -ms-linear-gradient(#000000, #212121); /* IE */
    background: linear-gradient(#000000, #212121); /* WWWWC */
    background-repeat: repeat-x;
    text-align: center;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.7);
    z-index: 10;

    -moz-transition: height ease-in-out 300ms;
    -o-transition: height ease-in-out 300ms;
    -webkit-transition: height ease-in-out 300ms;
    transition: height ease-in-out 300ms;
}

#banner {
    display: block;
    position: absolute;
    bottom: 70px;
    left: 0px;
    right: 0px;
    cursor: pointer;
    -moz-transition: opacity linear 200ms;
    -o-transition: opacity linear 200ms;
    -webkit-transition: opacity linear 200ms;
    transition: opacity linear 200ms;
}

#logo {
    position: relative;
    /* width: 0px; */
    /* text-align: center; */
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
    left: 0;
    transition: all ease-in-out 300ms;
}

#logo img {
    position: absolute;
    width: 750px;
    margin-left: -375px;
    margin-top: -250px;
}

#logo span {
    font-family: "RalewayThin";
    position: absolute;
    color: #A5B2B9;
    left: 20px;
    top: 10px;
    z-index: 99;
}    

.header_welcome #logo {
    left:50%;
}

.header_welcome #logo span {
    left:0;
    transform: translate(-50%, -1.3em);
    font-size: 3em;
}


#social_media {
	z-index: 1000;
    text-align: right;
    width: 220px;
    height: 40px;
    position: absolute;
    right: 25px;
    top: 25px;
}

#social_media {
    display: none; /* TODO: Remove this entirely */
}

#social_media .mediaglow {
    display:inline-block;
    width:40px;
    height:40px;
    opacity:0.5;
    transition:opacity linear 200ms;
	background-size: 100%;
}

#social_media .mediaglow:hover {
    opacity:1;
}

#social_media a:focus .mediaglow {
    opacity:1;
}

#social_media img {
    opacity:0;
    transition:opacity linear 200ms;
}

#social_media img:hover {
    opacity:0.75;
}

#social_media a:focus img {
    opacity:0.75;
}


/************************** ANIMATED HEADER / FOOTER **************************/
.header_min {
    height: 80px;
}

.header_welcome {
    height: 55%;
}

.footer_max {
    height: 200px;
}

.footer_min {
    height: 50px;
}

.footer_welcome {
    height: 45% !important;
}

#footer_wrapper {
    display:none;
    padding:15px;
}

#logo img, #logo span {
    -moz-transition: all ease-in-out 300ms;
    -o-transition: all ease-in-out 300ms;
    -webkit-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

#logo .large_3d {
    width:750px;
    margin-left:-375px;
    margin-top:-250px;
	left:0px;
}

#logo .small_3d {
    width:200px;
    left:-215px;
    margin-top:0px;
	z-index: 1000;
}

#logo .large_text {
    font-size: 190px;
    -webkit-text-shadow: 0px 0px 130px rgba(0, 204, 255, 0.7), 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px black;
    text-shadow: 0px 0px 130px rgba(0, 204, 255, 0.7), 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px black;
}

#logo .small_text {
    font-size: 100px;
    margin-top:-115px;
    -webkit-text-shadow: 0px 0px 60px rgba(98, 161, 255, 1), 0px 0px 10px black, 0px 0px 5px black;
    text-shadow: 0px 0px 60px rgba(98, 161, 255, 1), 0px 0px 10px black, 0px 0px 5px black;
}

@media (max-width: 1240px) {
    #logo .large_3d {
        width: 700px;
        margin-left: -350px;
        margin-top: -320px;
    }
}

@media (max-width: 1100px) {
    #logo .large_3d {
        opacity:1;
    }

    #logo .small_3d {
        opacity:0;
    }
}

@media (max-width: 840px) {
    #logo .large_text {
        width: 600px;
        margin-left: -290px;
        margin-top: -240px;
        opacity:0.85;
    }

    #logo .small_text {
        width: 500px;
        margin-left: -250px;
        margin-top: -190px;
        opacity:0.65;
    }

    #social_media {
        width: 360px;
        height: 40px;
        position: absolute;
        right: 15px;
        top: 15px;
    }
}

@media (max-width: 700px) {

    .header_welcome {
        height: 90%;
    }

    .footer_welcome {
        height: 10%;
    }
}

/******************************* NAVIGATION *******************************/
nav {
    position:absolute;          /* Position in bottom middle */
    bottom:0px; left:0px; right:0px;
    font-family:"SW-Link", "Courier New", Courier, monospace;
    font-size:30px;
}

nav > ul > li {
    display:inline-block;       /* Layout items horizontally */
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

nav > ul > li:hover {
    background:rgba(17,17,17,0.8);
}

nav ul li:hover ul{
    display:block;              /* Display submenu on hover */
}

nav ul ul {
    display:none;               /* Hide submenu as default */
    position:absolute;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    background:rgba(17,17,17,0.8);
    font-size:16px;
}

nav ul ul li {
    display:block;              /* Layout submenu horizontally */
    border-top:1px solid rgba(255, 255, 255, 0.1);
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}

nav ul ul li:last-of-type {
    border-bottom:none;
}

nav ul ul li:hover {
    display:block;              /* Layout submenu horizontally */
}

nav ul a {
    display:block;
    width:222px;                /* Width is fixed */
    padding:20px 0px;           /* Height is variable */
    transition:all ease-out 250ms;
    color:#6b757b;
}

/* Links glow on hover/focus */
nav ul a:hover, nav ul a:focus {
    color:white;
    text-shadow:0px 0px 1px white, 1px 0px 1px white, 0px 0px 15px white, 0px 0px 45px white;
    transition:all ease-out 50ms;
}

nav ul .glow {
    color:white;
    text-shadow:0px 0px 1px white, 1px 0px 1px white, 0px 0px 15px white, 0px 0px 45px white;
}

/* Nav responsiveness for 1024px compatability */
@media (max-width: 1240px) {
    nav > ul {
        width:100%;             /* Width is responsive */
        font-size: 0.8em;
    }

    nav > ul > li {
        width:16%;              /* Width is a little less than a fifth */
    }

    nav > ul a {
        width:100%;             /* Buttons fill the entire list item */
    }

    nav ul ul {
        width:16%;              /* the submenu follows the same principle as the list item */
    }

    nav ul ul a {
        font-size:0.8em;        /* Font size in submenu is reduced */
    }
}

@media (max-width: 1024px) {
    nav ul a {
        font-size: 0.7em;
    }

    nav ul ul a {
        font-size: 0.7em;
    }
}

@media (max-width: 800px) {
    nav ul a {
        font-size: 0.6em;
    }

    nav ul ul a {
        font-size: 0.6em;
    }
}

@media (max-width: 650px) {
    nav ul a {
        font-size: 0.5em;
    }

    nav ul ul a {
        font-size: 0.5em;
    }
}

/******************************* SCROLLBAR *******************************/

.scrollbar-style::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0);
	border-radius: 0px;
	background-color: #1F1F1F;
}

.scrollbar-style::-webkit-scrollbar
{
	width: 12px;
	background-color: #1F1F1F;
}

.scrollbar-style::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/******************************* CONTENT *******************************/
.policy {
	margin:30px;
}

.policy h2 {
	margin-bottom: 20px;
}

.policy h3 {
	margin-bottom: 5px;
	font-size: 1.2em;
}

.policy p, .policy ul {
	margin-bottom: 15px;
}

.policy ul {
	list-style-type:circle;
}

.policy ul li {
	margin-left: 20px;
}

#content_wrapper {
    position:fixed;
    overflow-y:scroll;
    top: 80px; bottom: 50px; left: 0px; right: 0px;
    background-color: #1F1F1F;
    background-image:url('../images/background/BG01_3900px.jpg'); 
    background-image:none !important; 
    background-position:top center;
    background-repeat:no-repeat;
    background-size:100%;

    -moz-transition: top ease-in-out 300ms;
    -o-transition: top ease-in-out 300ms;
    -webkit-transition: top ease-in-out 300ms;
    transition: top ease-in-out 300ms;
}

#content {
    /*min-height:100%;*/
    padding:10px;
    background:rgba(39, 44, 60, 0.65);
    box-shadow:0px 0px 10px rgba(0,0,0,0.7);
}

#content > section {
    display:none;
    position: relative;
}

#breadcrumb {
    transition:all linear 200ms;
	display:none;
}

#breadcrumb span {
    margin:10px;
}

section > aside {
    float:right;
    margin:0px 10px 10px;
}

section > #resume-wrapper > aside {
    float:right;
    margin:0px 10px 10px;
}

section > article {
    margin:10px;
}

.window {
    text-align:left;
    margin-bottom:20px;
}

.window .title {
    background:url('../images/window_title.png');
    background-position: top right;
    height:30px;
	background-size: cover;
}

.window .title h2 {
    font-family: LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 100;
    padding: 6px 10px 4px;
}

.window h2 {
    font-family:LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-weight:normal;
    font-size:34px;
    padding:2px 13px;
}

.window h3 {
    font-family:LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-weight:normal;
    font-size:24px;
    padding:2px 13px;
}

.date {
    font-family:SW-Link, "Courier New", Courier, monospace;
    font-size:16px;
    font-weight:100;
    letter-spacing:-4px;
    padding:10px;
}

.window p {
    font-family:LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    text-align:justify;
    padding:2px 13px 8px;
}

.window img {
    margin:10px 13px 2px;
    transition:box-shadow ease-out 100ms;
}

.window .content {
    border:5px solid rgba(0,0,0,1);
    background:rgba(0,0,0,0.5);
    padding-bottom:10px;
}

.window .videoframe {
    padding-bottom:0px;
    height: 304px;
}

.window .videoframe img {
    margin:0px;
}

.border {
    margin:10px;
    border-top:1px solid rgba(0,0,0,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/******************************* DEFAULT *******************************/
#default > aside {
    width:300px;
}

#default > article {
    width:600px;
}

#default .nyheder {
    padding-top:10px;
}

#slider #image_container {
    overflow:hidden;
    position:relative;
    width:590px;
    height:450px;
    border-bottom:5px solid rgba(0,0,0,1);
}

#slider #image_container img {
    position:absolute;
    width:590px;
    height:450px;
    padding:0px;
}

#slider #image_container #image1 {
    left:590px;
}

#slider #image_container #image2 {
    left:0px;
}

#slider #image_container .sliderimage {
    margin:0px;
    padding:0px;
}

/******************************* SHOWREEL *******************************/
#showreel > article {
    width:920px;
}

#showreel .content {
    padding:0px;
    height: 512px;
}

#showreel .download {
    position: absolute;
    right: 24px;
    top: 74px;
    z-index: 5;
}

/******************************* GALLERIES *******************************/
.galleries  > aside {
    width:550px;
}

.galleries  > article {
    width:350px;
}

.galleries  .content > p > span {
    display:inline-block;
    width:150px;
}

.galleries  .content > ul {
    list-style:circle;
    font-family: LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    text-align: left;
    padding: 2px 13px 8px 36px;
}

.galleries .download {
    position: absolute;
    right: 15px;
    top: 5px;
    z-index: 5;
}

/******************************* GALACTIC GUNDOWN *******************************/

.center {
	text-align:center;
}

.studio_section > article {
	padding:0px 20px;
	width:inherit;
}

.studio_section > article > p{
	margin: 15px 0px 25px;
}

.studio_section > article > h3, .studio_section > article > h2{
	margin:15px 0px;
}

.youtube_video {
    width: 880px;
	height: 495px;
}

.cinestyle {
	height: 374px;
}

.youtube_video iframe {
    width: 100%;
    height: 100%;
}

.line {
	margin:30px 0px;
	border-bottom:1px solid rgba(255,255,255,0.5);
}

/******************************* PORTFOLIO *******************************/

#portfolio > article {

}

#portfolio .portfolioimage {
    display:block;
    position:relative;
    left:-20px;
    padding:10px 0px;
    overflow: hidden;
    width: 960px;
    height: 314px;
}

#portfolio .portfolioimage > .imgbox {
    width: 960px;
    height:290px;
    border-top: 2px solid rgba(128, 128, 128, 0.50);
    border-bottom: 2px solid rgba(128, 128, 128, 0.50);
    -moz-transition: all ease-in-out 150ms;
    -o-transition: all ease-in-out 150ms;
    -webkit-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
    background-color:black;
}

#portfolio .imgbox > img {
    position: absolute;
    width: 960px;
    -moz-transition: opacity ease-in-out 150ms;
    -o-transition: opacity ease-in-out 150ms;
    -webkit-transition: opacity ease-in-out 150ms;
    transition: opacity ease-in-out 150ms;
    opacity:1;
}

#portfolio .imgbox > h2 {
    font-family:LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 120px;
    font-size: 50pt;
    color: whitesmoke;
    -moz-transition: all ease-in-out 150ms;
    -o-transition: all ease-in-out 150ms;
    -webkit-transition: all ease-in-out 150ms;
    transition: all ease-in-out 150ms;
    -webkit-text-shadow: 0px 0px 1px white, 0px 0px 2px white, 0px 0px 10px black;
    text-shadow: 0px 0px 1px white, 0px 0px 2px white, 0px 0px 10px black;
}

#portfolio .portfolioimage:hover h2 {
    -webkit-text-shadow: 0px 0px 1px white, 0px 0px 2px white, 0px 0px 3px white, 0px 0px 200px white;
    text-shadow: 0px 0px 1px white, 0px 0px 2px white, 0px 0px 3px white, 0px 0px 200px white;
}

#portfolio .portfolioimage:hover .imgbox {
    border-top: 2px solid rgba(230, 230, 230, 0.90);
    border-bottom: 2px solid rgba(230, 230, 230, 0.90);
    -moz-box-shadow: 0px 0px 8px white;
    -webkit-box-shadow: 0px 0px 13px  white;
    box-shadow: 0px 0px 13px  white;
}

#portfolio .portfolioimage:hover img {
    opacity:0.5;
}

/******************************* RESUME *******************************/
#resume > div > article {
    padding-top: 5px;
    width:350px;
}

#resume > div > aside {
    width:550px;
}

#resume .content > h2 {
    color: #BE623D;
}

#resume .date {
    display: inline-block;
    border-radius: 10px;
    padding: 6px 8px 5px;
    margin: 3px 20px;
    width: 255px;
}

#resume .grade {
    display: inline-block;
    text-align: right;
    width: 208px
}

#resume .grade img{
    margin: 0px 0px -5px 10px;
    width: 24px;
    height: 24px;
}

#resume .profile {
    position:relative;
    height: 173px;
    padding:40px 0px 0px;
}

#resume .profile span{
    display:inline-block;
    min-width:72px;
}

#resume .profile img{
    position:absolute;
    bottom:0px;
    left:0px;
    margin:0px;
}

#resume .profile p {
    margin-left: 150px;
}

#resume .experience {
    overflow:hidden;
    cursor:pointer;
}

#resume .experience:hover h3 {
    color:white;
    text-shadow:0px 0px 5px white;
}

#resume .experience .location {
    color:#349bb9;
}
#resume .experience .description {
    -moz-transition: max-height ease-in-out 500ms;
    -o-transition: max-height ease-in-out 500ms;
    -webkit-transition: max-height ease-in-out 500ms;
    transition: max-height ease-in-out 500ms;
    max-height: 0px;
    height:auto;
}

#resume .description ul {
    list-style:disc;
    font-family: LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    text-align: left;
    padding: 2px 13px 8px 36px;
}

#resume .description .column{
    display: inline-table;
    width:260px;
}

#resume .description .column2{
    display: inline-table;
    width:275px;
}


#resume .description ul ul{
    list-style:circle;
    padding: 2px 13px 8px 10px;
}



/******************************* KONTAKT *******************************/
#kontakt .info {
    display:inline-table;
    width:346px;
}

#kontakt .info .content{
    height:300px;
}

#kontakt .info .content p{
    margin-left:20px;
}

#kontakt .map {
    display:inline-table;
    width:546px;
}

#kontakt .content {
    padding: 0px;
}

#kontakt label {
    display:inline-block;
    vertical-align: top;
    font-family:LatoLight, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-size:20px;
    padding: 10px;
    margin: 10px;
    width: 50px;
}

#kontakt input, #kontakt textarea {
    color: white;
    border: 1px solid #73858A;
    padding: 10px;
    margin: 10px;
    background-color: rgba(250,250,250,0.15);
    width: 300px;

    -moz-transition: all linear 100ms;
    -o-transition: all linear 100ms;
    -webkit-transition: all linear 100ms;
    transition: all linear 100ms;
}

#kontakt textarea {
    width: 738px;
    height: 200px;
}           

#kontakt .button {
    float:right;
    width: 200px;
    margin-right:47px;
}

#kontakt .button:hover, #kontakt .button:focus {
    background-color: rgba(250,250,250,0.35);
}

#gmap_canvas {
    height:300px;
    width:536px;
    overflow:hidden;
}

#contact_confirmation {
	display:none;
	position: fixed;
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
}

#contact_confirmation div {
    background-color: rgba(100,100,100,0.8);
    width: 340px;
    height: 180px;
    position: relative;
    left: -170px;
    top: 125px;
}

#contact_confirmation .button {
    display: block;
    float: none;
    width: 150px;
    margin: 15px auto;
    color: white;
    border: 1px solid #73858A;
    padding: 10px;
    background-color: rgba(250,250,250,0.15);
    -moz-transition: all linear 100ms;
    -o-transition: all linear 100ms;
    -webkit-transition: all linear 100ms;
    transition: all linear 100ms;
}

#contact_confirmation p {
	padding: 0px 20px;
}

#contact_confirmation h3 {
	padding: 20px;
}




/******************************* FOOTER *******************************/
footer {
    width: 100%;
    position: fixed;
    bottom: 0px;
    background: #171717; /* Old browsers */
    background: -moz-linear-gradient(#171717, #000000); /* FF3.6+ */
    background: -webkit-linear-gradient(#171717, #000000); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(#171717, #000000); /* Opera 11.10+ */
    background: -ms-linear-gradient(#171717, #000000); /* IE10+ */
    background: linear-gradient(#171717, #000000); /* W3C */
    font-size: 0.8em;
    text-align: center;

    -moz-transition: height ease-in-out 300ms;
    -o-transition: height ease-in-out 300ms;
    -webkit-transition: height ease-in-out 300ms;
    transition: height ease-in-out 300ms;
}

@media (max-width:700px){
    footer {
        font-size:0.6em;
    }
}

#links span {
    padding:10px;
}

#links p {
    display:inline;
}

#sitemap, #nyhedsbrev {
    display:none;
}

#sitemap {
    text-align:left;
    margin:20px;
}

#sitemap img{
    display:inline-block;
    height:120px;
    width:158px;
    opacity:0.8;
    margin-left:282px;
}

#sitemap > ul{
    display:inline-block;
    margin-left:110px;
}

#sitemap li{
    margin-left:15px;
}

#nyhedsbrev h2{
    margin:14px;
}

#nyhedsbrev label {
    display:inline-block;
    vertical-align: top;
    font-family:LatoLight, sans-serif, Lato, "Trebuchet MS", Helvetica, sans-serif;
    font-size:20px;
    padding: 2px 10px 10px;
    margin: 10px;
    width: 50px;
}

#nyhedsbrev input {
    color: white;
    border: 1px solid #73858A;
    padding: 6px;
    margin: 10px;
    background-color: rgba(250,250,250,0.15);
    width: 200px;

    -moz-transition: all linear 100ms;
    -o-transition: all linear 100ms;
    -webkit-transition: all linear 100ms;
    transition: all linear 100ms;
}           

#nyhedsbrev .button {
    width: 100px;
}

#nyhedsbrev .button:hover, #nyhedsbrev .button:focus {
    background-color: rgba(250,250,250,0.35);
}

#welcome_gallery {
    margin:40px;
}

#welcome_gallery .skew {
    display: inline-block;
    overflow: hidden;
    height: 260px;
    width: 120px;
    margin: 0px 60px;
    position: relative;
    background-image:url('../images/ajax-loader.gif');
    background-position:center center;
    background-repeat:no-repeat;

    -moz-box-shadow: 0px 0px 10px black inset;
    -webkit-box-shadow: 0px 0px 10px black inset;
    box-shadow: 0px 0px 50px black, 0px 0px 50px black;

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -moz-transform: skew(-16deg, 0);
    -ms-transform: skew(-16deg, 0);
    -o-transform: skew(-16deg, 0);
    -webkit-transform: skew(-16deg, 0);
    transform: skew(-16deg, 0);

    -moz-transition: all linear 50ms;
    -o-transition: all linear 50ms;
    -webkit-transition: all linear 50ms;
    transition: all linear 50ms;
}

#welcome_gallery .skew .image {
    background-position: center center;
    height:300px;
    width:360px;
    position: absolute;
    top:-20px;
    left: -120px;
    opacity:0;

    -moz-transform: skew(16deg, 0);
    -ms-transform: skew(16deg, 0);
    -o-transform: skew(16deg, 0);
    -webkit-transform: skew(16deg, 0);
    transform: skew(16deg, 0);

    -moz-transition: all linear 50ms, opacity linear 300ms;
    -o-transition: all linear 50ms, opacity linear 300ms;
    -webkit-transition: all linear 50ms, opacity linear 300ms;
    transition: all linear 50ms, opacity linear 300ms;
}

#welcome_gallery a:hover .skew, #welcome_gallery a:focus .skew {
    width: 240px;
    margin:0px;
}

#welcome_gallery a:hover .image, #welcome_gallery a:focus .image {
    left:-60px;
}

#welcome_gallery a {
    position: relative;
}

#welcome_gallery a .text {
    position: absolute;
    bottom: 130px;
    left: 0;
    right: 0;
    text-align: center;
    transform: translate(0, 50%);
    font-size: 3em;
    text-transform: uppercase;
    color: #fefefe;
    opacity: 0;
    -moz-transition: opacity linear 50ms;
    -o-transition: opacity linear 50ms;
    -webkit-transition: opacity linear 50ms;
    transition: opacity linear 50ms;
}

#welcome_gallery a:hover .text {
    opacity: 1;
}

@media (max-width: 1300px) {
    #welcome_gallery .skew {
        height: 170px;
        width: 80px;
        margin: 0px 40px;
    }

    #welcome_gallery .skew .image {
        height:200px;
        width:240px;
        left: -80px;
    }

    #welcome_gallery a:hover .skew, #welcome_gallery a:focus .skew {
        width: 160px;
    }

    #welcome_gallery a:hover .image, #welcome_gallery a:focus .image {
        left:-40px;
    }
}

@media (max-width: 100px) {
    #welcome_gallery .skew {
        height: 130px;
        width: 60px;
        margin: 0px 30px;
    }

    #welcome_gallery .skew .image {
        height:150px;
        width:180px;
        left: -60px;
    }

    #welcome_gallery a:hover .skew, #welcome_gallery a:focus .skew {
        width: 120px;
    }

    #welcome_gallery a:hover .image, #welcome_gallery a:focus .image {
        left:-30px;
    }
}

@media (max-width: 700px) {
    #welcome_gallery {
        display:none !important;
        opacity:0 !important;
    }


}

@media (max-width: 2400px) {
    #content_wrapper {
        background-image: url('../images/background/BG01_2400px.jpg');
    }
}

@media (max-width: 1600px) {
    #content_wrapper {
        background-image: url('../images/background/BG01_1600px.jpg');
    }
}

@media (max-width: 1050px) {
    #content_wrapper {
        background-image: url('../images/background/BG01_1050px.jpg');
    }
}


@media (max-width:960px){
    .w960 {
        width:98%;
        padding:1%;
        margin:auto;
    }

    #content {
        padding:1%;
    }

    section > article {
        width: 96% !important;
    }

    section {
        margin-top: 10px;
    }

    section > aside {
        float:none !important;
        width: 96% !important;
    }

    .window .videoframe {
        height: auto; 
    }

    .window .videoframe img {
        width:100%;
    }

    #showreel .content {
        height: inherit;
    }

    video {
        width: 100%;
    }

    #gmap_canvas {
        width:100%;
    }
    
    #kontakt .info .content {
        height: auto;
    }

    #kontakt label {
        width: 10%;
    }

    #kontakt input, #kontakt textarea {
        width: 72%;
    }        

    #kontakt .button {
        width: 200px;
        margin-right:47px;
    }

    #portfolio .portfolioimage {
        left:0px;
        width: 100%;
        height: auto;
    }

    #portfolio .portfolioimage > .imgbox {
        width: 100%;
        height: auto;
    }

    #portfolio .imgbox > img {
        width: 100%;
    }

    #portfolio .imgbox > h2 {
        position: relative;
        top: 0px;
    }
}

@media (max-width:700px){
    #portfolio .imgbox > h2 {
        font-size: 2.6em;
    }
}



/****************/
/*   SKILLBOX   */
/****************/
.skillbox {
    font-family:LatoLight;
    padding: 14px 20px 0px;
}

.skillbox span {
    display:inline-block;
    width:28px;
}

.skillbox h3 {
    padding:2px 0px;
}

.skillbox .skill {
    display:inline-block;
    width:130px;
}

.skillbox .border {
    margin:0px;
    padding: 14px 0px 0px
}
    
.skillbox .level {
    display:inline-block;
    width:125px;
    margin-left: 5px;
    height:4px;
    transition:all ease-out 1000ms;
    transition: ease-out 1000ms;
    border:0px;
}
    
.skillbox .level .inner { 
    position:relative;
    top:0px;
    width:100%;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    transition:all ease-out 1000ms;
}

/* making colored borders showing skill levels */
/**
.skillbox .red {
    border-top:1px solid #ff3030;
    transition-timing-function:cubic-bezier(0,0.1,0.25,1);
}
    
.skillbox .red .inner { 
    border-top:1px solid #e50d0d;
    border-bottom:1px solid #7d0606;
}
    
.skillbox .blue {
    border-top:1px solid #51adf2;
    transition-timing-function:cubic-bezier(0.42,0,1,1);
}
    
.skillbox .blue .inner { 
    border-top:1px solid #0094ea;
    border-bottom:1px solid #0b4072;
}
    
.skillbox .green {
    border-top:1px solid #6df646;
    transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);
}
    
.skillbox .green .inner { 
    border-top:1px solid #38ba24;
    border-bottom:1px solid #145e0b;
}
    
.skillbox .orange {
    border-top:1px solid #fabe43;
    transition-timing-function:cubic-bezier(0.42,0,0.58,1);
}
    
.skillbox .orange .inner { 
    border-top:1px solid #feb60a;
    border-bottom:1px solid #c86200;
}
    
.skillbox .purple {
    border-top:1px solid #a053f6;
    transition-timing-function:cubic-bezier(0,0.3,0.58,1);
}
    
.skillbox .purple .inner { 
    border-top:1px solid #830eea;
    border-bottom:1px solid #470a8d;
}
    
.skillbox .yellow {
    border-top:1px solid #f3ff8b;
    transition-timing-function:cubic-bezier(0.12,0,0.58,1);
}
    
.skillbox .yellow .inner { 
    border-top:1px solid #ede220;
    border-bottom:1px solid #8f8d16;
}

**/

/***************************************/
/*************** GALLERY ***************/
/***************************************/
.thumbnail {
    background:#000 url('../images/ajax-loader.gif');
    background-position:center;
    background-repeat:no-repeat;
    display:inline-block;
    margin:47px 0px;
    width:0px;
    height:0px;
    border:0px solid black;
    border-radius:50px;
    box-shadow: 0px 0px 14px black inset;
    overflow:hidden;
    
}

.thumbnail img{
    margin:0px;
    
}

.thumbnail:hover {
    border-radius:5px;
}


/***************** LIGHTBOX *******************/
#lightbox {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1001;
    display:none;
}

#lightbox .shadow {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.60);
    z-index:1;
}

#lightbox .loader_wrapper {
    position:absolute;
    z-index: 1;
    height:64px;
    width:64px;
    overflow: hidden;
    top: 43%;
    right: 48%;
    opacity: 0.8;
}

#lightbox .loader_image {
    right: 64px;
    position: relative; 
}

#lightbox .content {
    border-radius: 15px;
    overflow: hidden;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    margin: auto;
    z-index: 2;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.6), 0px 0px 60px rgba(0,0,0,0.6);
    -moz-transition: opacity linear 300ms;
    -o-transition: opacity linear 300ms;
    -webkit-transition: opacity linear 300ms;
    transition: opacity linear 300ms;
    opacity:0;
}

#lightbox .image {
    position:absolute;
    z-index: 2;
    -moz-transition: opacity linear 300ms;
    -o-transition: opacity linear 300ms;
    -webkit-transition: opacity linear 300ms;
    transition: opacity linear 300ms;
}

#lightbox .text {
    padding:10px;
    position:absolute;
    bottom:5px;
    left:5px;
    max-width:500px;
    text-align:justify;
    background-color:rgba(0,0,0,0.5);
    border-bottom-left-radius:10px;
    z-index:3;
}

#lightbox .close {
    display:block;
    opacity:0.7;
    position: absolute;
    top: 5px;
    right: 5px;
    width:50px;
    height:50px;
    z-index:4;
}

#lightbox .close:hover {
    opacity:1;
}

#lightbox .arrow {
    opacity:0.7;
    position:fixed;
    top:50%;
    margin-top:-50px;
    z-index:4;
}

#lightbox .arrow:hover {
    opacity:1;
}

#lightbox .left {
    left:-100px;
}

#lightbox .right {
    right:-100px;
}

/***************** NEWSLETTER *******************/

.lightbox {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1001;
	background: rgba(0,0,0,0.7);
    display:none;
}

#newsletterform{
	background-color: rgb(40,40,40);
    width: 400px;
    margin: auto;
    top: 40%;
    position: relative;
    min-height: 356px;
    display: -webkit-box;
	border-radius: 10px;
}

#newsletterform .close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0.5;
    z-index: 2000;
}

#mc_embed_signup {
	width: 100%;
	background:none!important;
}

#mc_embed_signup h3{
	margin-bottom:6px!important;
	font-size:2em!important;
}

#mc_embed_signup form {
	padding: 20px;
}

#mc_embed_signup .indicates-required {
    text-align: right;
    font-size: 11px;
    margin-right: 4%;
}

#mc_embed_signup .mc-field-group label {
    display: block;
    margin-bottom: 3px;
}

#mc_embed_signup input {	
    background-color: rgba(255,255,255,0.7);
    border: 1px solid #ABB0B2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
	padding:2%;
    margin-bottom: 10px;
	color:black;
}

#mc_embed_signup input[type="checkbox"] {
    -webkit-appearance: checkbox;
	display: inline;
    width: auto;
	margin: 6px;
}

#mc_embed_signup .mc-field-group input {
    text-indent: 2%;
    padding: 8px 0px;
}

#mc_embed_signup .mc-field-group label {
    position: relative;
    bottom: 2px;
    margin-bottom: 3px;
}
#mc_embed_signup .mc-field-group.input-group label {
    display: inline;
}

#mc_embed_signup input[type="submit"] {
	width:50%;
    margin: 10px 25%;
    -moz-transition: all ease-in-out 100ms;
    -o-transition: all ease-in-out 100ms;
    -webkit-transition: all ease-in-out 100ms;
    transition: all ease-in-out 100ms;
}

#mc_embed_signup input[type="submit"]:hover {
	background-color:rgba(255,255,255,0.3);
}



@media (max-height: 600px) {
    .header_min {
        height: 50px;
    }

    #social_media {
        display:none;
    }
    #content_wrapper {
        top: 50px;
    }
    #banner {
        opacity:0;
    }
}

/*** GOOGLE MAPS ***/

.window .gm-style img {
	margin:auto;
}

.map .gmnoprint {
	visibility: hidden;
}


/*** COOKIE INFO ***/
.cookieinfo {
	background: rgba(38, 38, 38, 0.75) !important;
	color: rgba(238, 238, 238, 0.75) !important;
}

.cookieinfo-close {
	background: #BE623D !important;
}

.cookieinfo-close:hover {
	background: #359ab8 !important;
}


/*** MOBILE ***/
@media only screen and (orientation: portrait) {
	body {
		font-size: 2.5vw;
	}
	
	
	.window .title {
		height:auto;
	}
	
	.window .title h2 {
		font-size:1.8rem;
	}
	
	#social_media {
		width: 60vw;
		height: 11vw;
	}
	
	#social_media .mediaglow {
		width: 10vw;
		height: 10vw;
	}
	
	#social_media .mediaglow img {
		width: 10vw;
		height: 10vw;
	}
	
	.header_welcome {
		height: 66vw;
	}
	
	.header_min {
		height: 24vw;
	}
	
	#logo .small_3d {
		opacity: 1;
		width: 200px;
		left: 0px;
		margin-top: -12vw;
		margin-left: -5vw;
		width: 33vw;
	}

    #logo {
        font-size: 1.5em;
        transform: translate(10px, -140px);
    }
	
	#content {
		margin-top: 16vw;
	}
	
	nav {
		font-weight: bold;
	}
	
	nav ul li {
		width: 30%;
	}
	
	nav ul li a {
		font-size: 1.5em;
	}
	
	nav ul li ul {
		display: none !important;
	}
	
	#content > #intro {
		display: block;
		margin: 45vw 5vw 27vw;
	}
	
	#content > #intro h1, #content > #intro h2, #content > #intro h3 {
		margin: 8vw 0px 2vw;
	}
	
	#welcome_gallery {
		
		
	}
	
	#resume-wrapper {
		display: flex;
		flex-direction: column;
		font-size:1.8rem;
	}
	
	#resume-wrapper > .window {
		width: auto;
		margin: 10px;
	}
	
	#resume-wrapper .resume-about {
		order:3;
	}
	#resume-wrapper .resume-education {
		order:4;
	}
	#resume-wrapper .resume-courses {
		order:5;
	}
	#resume-wrapper .resume-profile {
		order:1;
	}
	#resume-wrapper .resume-skills {
		order:2;
	}
	
	#resume .date {
		width: 50vw;
	}
	
	#resume .grade {
		width: 30vw;
	}
	
	.skillbox .skill {
		width: 25vw;
	}
	
	.skillbox .level {
		border: 0px;
		width: 60vw !important;
	}
	
	.skillbox .level .inner {
		width: 0px;
		border-top-width:2px;
		border-bottom-width:2px;
	}
	
	
	#suzzallo .window {
		display: block;
		float: none;
		width: 94vw;
	}
	
	#suzzallo .window .videoframe {
		height: auto !important;
	}
	
	#suzzallo .window .videoframe video{
		height: 100%;
		width: 100%;
	}
	
	/* Contact info redundant */
	#kontakt .info {
		display: none;
	}
	
	/* Widen and Highten Google Map */
	#kontakt .map {
		display: block;
		width: auto;
	}
	
	#gmap_canvas {
		width: auto;
		min-height: 38vh;
	}
	
	.gm-style .gm-style-iw.gm-style-iw-c {
		font-size: 2rem;
	}
	
	.gm-style-iw-d {
		margin: 1vw 2.5vw;
	}
	
	/* Responsive footer */
	.footer_min, .footer_max {
		font-size: 2vw;
	}
	
	.footer_welcome {
		height: 25vw !important;
	}
	
	.cookieinfo {
		font-size: 2.5rem !important;
		line-height: inherit !important;
	}
	
	#newsletterform {
		width: 70vw;
	}
	
	#newsletterform .close {
		transform: scale(1.5);
		top: 2vw;
		right: 2vw;
	}
	
	#mc_embed_signup, #mc_embed_signup .indicates-required {
		font-size: 1.5rem;
	}
	
	#mc_embed_signup input[type="submit"] {
		font-size: 2rem;
	}
	
	#mc_embed_signup input[type="checkbox"] {
		transform: scale(2);
		margin: 2vw;
	}
	
	.gdprinfo {
		color:grey;
	}
	
	.policy h3 {
		margin: 5vw 0vw 2vw;
	}
	
}