/*
red: #fb054b - 98, 2, 29
green: #658b88 - 40, 55, 53
blue #49b1ec
*/
html, body { 
	text-align: center;
	padding: 0;
	margin: 0;
	font-family: futura, helvetica, arial;
	font-size: 18px;
	color: #1f1f1f;
	background: #000 url(gfx/gradient_bar.png) repeat-x;
	background-size: contain;
	letter-spacing: 1px;
	overflow-x: hidden;
}
.body {
	
}
.bold {
	font-weight: bold;
}
.color-red, .text-red {
	color: #fb054b;
}
.color-green, .text-green {
	color: #658b88;
}
.text-upper {
	text-transform: uppercase;
}
.clear { 
	clear: both; 
}
.ib {
	display: inline-block;
}
.nowrap {
	white-space: nowrap;
}
.absolute {
	position: absolute;
}
#top { 
	height: 60px;
	background: rgba(0,0,0,.5);
	background: linear-gradient(90deg, rgba(0,0,0,.5),rgba(0,0,0,.5),rgba(0,0,0,.5),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0));
	position: fixed;
	z-index: 5;
	width: 100%;
	color: #fff;
	top: 0;
}
#header {
	position: relative;
}
#menu {
	text-align: left;
	position: relative;
	padding: 15px 20px;
	box-sizing: border-box;
	width: 100%;
}
#burger-menu-check {
	display: none;
	opacity: 0;
	width: 0;
	height: 0;
}
#burger-menu-button {
	display: none;
}
#menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#menu ul li {
	list-style-type: 0;
	padding: 0;
	margin: 0;
	display: inline-block;
}
#logo {
	width: 280px;
	height: 70px;
	max-width: 64%;
	background-color: transparent;
	background-image: url(gfx/logo_yellow.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	position: absolute;
	top: 10px;
	right: 20px;
	transition: background-image .5s;
}
#logo[data-scroll="top"] {
	background-image: url(gfx/logo_yellow.png?x=1);
}
#logo[data-scroll="middle"] {
	background-image: url(gfx/logo_blue.png?x=2);
}
#logo[data-scroll="bottom"] {
	background-image: url(gfx/logo_mint.png?x=1);
}
a {
	color: #fb054b;
}
a.header-link {
	color: #fff;
	border-bottom: none;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	margin-right: 20px;
	text-transform: uppercase;
	line-height: 20px;
	transition: color .5s, border .2s;
}
a.header-link:hover {
	border-bottom: 3px solid #fff;
}
a.header-link.active {
	color: #49b1ec;
	border-bottom: none;
	transition: color .5s, border .5s;
}
a.blog-link {
	border: none;
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	font-style: italic;
	text-decoration: none;
	display: inline-block;
	padding: 2px 6px;
	text-transform: uppercase;
	font-family: futura-light, futura, helvetica, arial;
}
a.blog-link:hover {
	text-decoration: underline;
}
.lifebuoy {
	background-image: url(gfx/blogg_lifebuoy.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 95px;
	right: 30px;
	display: none;
	transition: right .5s;
}
.wrapper {
	max-width: 1333.33333px;
	margin: 0 auto;
	text-align: left;	
}
#content { 
	width: 100%;
	height: 3000px;
	background: transparent;
	background-image: url(gfx/sections_bg.jpg);
	background-repeat: no-repeat;
	background-position: top left; /* could be center left */	
	background-size: auto 100%;
	position: relative;
	_background-position: 50% -80px;
}
.section {
	/* bg width 2104x1578 == 1 x 1.333
 	*/
	text-align: left;
	margin: 0 auto;
	padding-top: 70px;
	height: 1000px;
	box-sizing: border-box;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
}
.section-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
.section1 {
	_background-image: url(gfx/section1_bg.jpg);
	height: 1270px;
}
.section2 {
	_background-image: url(gfx/section2_bg.jpg);
	height: 850px;
}
.section3 {
	_background-image: url(gfx/section3_bg.jpg);
	height: 880px;
}
.section-text {
	background: rgba(77,77,77,.7);
	padding: 15px;
	margin: 20px;
	max-width: 620px;
	display: inline-block;
	color: #fff;
	line-height: 140%;
	font-size: 22px;
	position: relative;
}
.section3 .section-text {
	_max-width: 300px;
}
.section-text p {
	margin: 0 0 20px 0px;
	padding: 0;
}
.section-text p:last-child {
	margin-bottom: 0;
}
.redline {
	position: absolute;
	top: 80px;
	right: 0px;
	width: 916px;
	height: 2920px;
	background-image: url(gfx/redline_v2.png?v=1);
	background-size: contain;
	background-position: bottom right;
	background-repeat: no-repeat;
}
/** graphic elements **/
.gfx-elem {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	max-width: 60%;
	position: relative;
	top: 0;
}
.gfx-block {
	position: absolute;
	display: inline-block;
}
.gfx-block, .gfx-elem {
	transition: left 1s, right 1s, top 1s, bottom 1s, width 1s, height 1s, opacity 1s;
}
.moving {
	display: inline-block;
}
.star1 {
	background-image: url(gfx/star1.png);
}
.star2 {
	background-image: url(gfx/star2.png);
}
.star3 {
	background-image: url(gfx/star3.png);
}
.star4 {
	background-image: url(gfx/star4.png);
}
.star-medium {
	width: 35px;
	height: 35px;
}
.star-small {
	width: 25px;
	height: 25px;
}
.star-tiny {
	width: 16px;
	height: 16px;
}
.star-link {
	font-size: 15px;
	width: 200px;
	height: 50px;
}
.star-link:hover span, .star-link:focus span {
	text-decoration: underline;
}
.star-link:hover div, .star-link:focus div {
	transform: scale(1.1, 1.1);
	transition: transform .2s;
}
#starlink1 {
	width: 110px;
	left: 50px;
	top: 270px;
}
#starlink2 {
	width: 150px;
	left: 230px;
	top: 260px;
}
#starlink3 {
	left: 500px;
	top: 280px;
}
#starlink4 {
	left: 730px;
	top: 320px;
}
.star-link span {
	position: absolute;
	left: 55px;
}
#starlink1 span {
	top: 20px;	
}
#starlink2 span {
	top: 20px;	
}
#starlink3 span {
	top: 20px;	
}
#starlink4 span {
	top: 20px;	
}
#shooting-outer {
	right:50px;
	top:130px;
	max-width: 90%;
	width: 230px;
	height: 120px;
}
.shooting-star {
	background-image: url(gfx/shootingstar.png);
	height: 190px;
	width: 140px;
	max-width: 50%;
	position: absolute;
	top: -80px;
	left: -130px;
}
.shooting-star-text {
	background-image: url(gfx/text_shootingstar.png);
	height: 120px;	
	width: 230px;
	max-width: 100%;
	display: block;
}
#star-tiny-1 {
	top: 50px;
	left: 700px;
}
#star-tiny-2 {
	top: 400px;
	left: 20px;
}
#star-tiny-3 {
	top: 360px;
	left: 1200px;
}
#star-tiny-4 {
	top: 410px;
	left: 1170px;
}
#star-tiny-5 {
	top: 370px;
	left: 1120px;
}
#star-small-1 {
	top: 330px;
	left: 10px;
}
#star-small-2 {
	top: 290px;
	left: 400px;
}
#star-small-3 {
	top: 510px;
	left: 760px;
}
#star-medium-1 {
	top: 350px;
	left: 50px;
}
#star-medium-2 {
	top: 290px;
	left: 170px;
}
#star-medium-3 {
	top: 310px;
	left: 420px;
}
.luftballong {
	background-image: url(gfx/Luftballong.png);
	width: 580px;
	height: 800px;
	top: 400px;
	left: 90px;
}

.bridge-text {
	background-image: url(gfx/bridge_text.png);
	width: 290px;
	height: 150px;
	top: 455px;
	left: 30px;
	opacity: 0;
}
.surfer {
	background-image: url(gfx/surfer.png);
	background-position: bottom right;
	width: 420px;
	height: 235px;
	position: absolute;
	top: auto;
	bottom: 62px;
	right: 30px;
}
.contact {
	background-image: url(gfx/contact.png);
	height: 130px;	
	width: 240px;
	opacity: 0;
	top: 500px;
	left: 220px;
}
.iceberg {
	background-image: url(gfx/iceberg.png);
	width: 350px;
	height: 670px;
	top: -194px;
	left: 380px;
	position: absolute;
	max-width: 33%;
	background-position: center;
}

.seo-fish {
	background-image: url(gfx/seo_fish.png);
	height: 130px;
	width: 210px;
	left: auto;
	right: 350px;
	bottom: 350px;
	top: auto;
	max-width: 40%;
}
.bubbles {
	background-image: url(gfx/bubbles.png);
	background-position: bottom right;
	width: 310px;
	height: 640px;
	position: absolute;
	right: -20px;
	bottom: 0px;
	max-width: 45%;
	top: auto;
}
.pinklink, .bubblelink {
	position: absolute;
    display: block;
    transform-origin: center;
	z-index: 3;
	border-radius: 100%;
	transition: all .3s;
	border: 2px solid transparent;
}
.pinklink:hover, .bubblelink:hover {
	_border: 2px solid rgba(98, 2, 29, .8);
	_background: rgba(255,255,255,.3);
}
#pinklink1 {
    width: 90px;
    height: 40px;
    bottom: 238px;
    right: 443px;
    transform: rotate(14deg);
}
#pinklink2 {
    width: 90px;
    height: 40px;
    bottom: 245px;
    right: 301px;
	transform: rotate(0deg);
}
#pinklink3 {
	width: 98px;
    height: 45px;
    bottom: 175px;
    right: 467px;
    transform: rotate(12deg);
}
#pinklink4 {
	width: 98px;
    height: 45px;
    bottom: 165px;
    right: 287px;
    transform: rotate(-12deg);
}
#pinklink5 {
	width: 108px;
    height: 45px;
    bottom: 105px;
    right: 247px;
    transform: rotate(-12deg);
}
.bubbles-inner {
	width: 100%;
	height: 0;
	padding-bottom: 207.348242812%;
	position: absolute;
	bottom: 0;
	right: 0;
}
#bubblelink1 {
    width: 38%;
    height: 0;
	padding-bottom: 37%;
    top: 2%;
    right: 36%;
}
#bubblelink2 {
	width: 22%;
    height: 0;
    padding-bottom: 20%;
    top: 18%;
    right: 68%;
}
#bubblelink3 {
    width: 35%;
    height: 0;
    padding-bottom: 31%;
    top: 26%;
    right: 61%;
}
#bubblelink4 {
	width: 30%;
    height: 0;
    padding-bottom: 29%;
    top: 42%;
    right: 70%;
}
#bubblelink5 {
	width: 28%;
    height: 0;
    padding-bottom: 27%;
    top: 37%;
    right: 44%;
}
#bubblelink6 {
    width: 33%;
    height: 0;
    padding-bottom: 29%;
    top: 20%;
    right: 18%;
}
#bubblelink7 {
	width: 19%;
    height: 0;
    padding-bottom: 18%;
    top: 14%;
    right: 9%;
}
/*
 Danish pictures
*/
.lang-da-dk .redline {
	background-image: url(gfx/redline_v2_dk.png?v=1);
}
.lang-da-dk .contact {
	background-image: url(gfx/contact_dk.png);
}
.lang-da-dk .bridge-text {
	background-image: url(gfx/bridge_text_dk.png);
}
.lang-da-dk .luftballong {
	background-image: url(gfx/Luftballong_dk.png);
}
.lang-da-dk .shooting-star-text {
	background-image: url(gfx/text_shootingstar_dk.png);
}
@media screen and (max-width: 700px) {
	/* show burgermenu	

	// do something to image sizes
	// i fear we need to control positioning with js
	*/
	.section-text {
		font-size: 20px;
	}
	#top {
		/*background: rgba(77,77,77,.95);*/
	}
	#menu {
		display: none;
	}
	#burger-menu-check:checked+#burger-menu-button+#menu {
		display: block;
		position: absolute;
		top:60px;
		background: rgba(0,0,0,.7);
		width: 100%;
		padding: 0;
		z-index: 5;
	}
	#menu ul li {
		display: block;
		width: 100%;
		border-top: 1px solid rgba(255,255,255,.1);
	}
	#menu ul li a.header-link, a.blog-link {
		display: block;
		padding: 10px;
		border-bottom: none;
		margin: 0;
	}
	#menu ul li a.header-link.active,
	#menu ul li a.header-link:hover {
		text-decoration: underline;
	}
	.blog-link {
		margin: 16px 10px;
	}
	#burger-menu-button {
		display:  block;
		position: absolute;
		top: 5px;
		left: 16px;
		width: 50px;
		height: 50px;
		cursor: pointer;
	}
	#burger-menu-button svg {
		fill: #fff;
		height: 50px;
		width: 50px;
	}
	#burger-menu-button:hover svg,
	#burger-menu-check:checked+#burger-menu-button svg {
		fill: #49b1ec;
	}
	.lifebuoy {
		right: -20px;
		width: 80px;
		height: 80px;
	}

	.surfer {
		right: 0;
	}
}
/* GFX POSITION ADJUSTMENTS */
@media screen and (max-width: 1090px) {
	#shooting-outer {
		left: 230px;
		top: 300px;
	}
	.shooting-star-text {
		_top: -50px;
	}
	.shooting-star {
		top: -40px;
	}
	.luftballong {
		top: 580px;
		left: 60px;
	}
	#starlink1 {
		top: 425px;
		left: 40px;
	}
	#starlink2 {
		top: 420px;	
	}
	#starlink3 {
		top: 470px;
		left: 130px;
	}
	#starlink4 {
		top: 455px;
		left: 370px;
	}
	#star-small-2 {
		top: 160px;
		left: 680px;
	}
	#star-small-3 {
		top: 420px;
		left: 760px;
	}
	#star-medium-2 {
		top: 290px;
		left: 560px;
	}
	#star-medium-3 {
		top: 100px;
		left: 730px;
	}
	#star-tiny-3 {
		top: 360px;
		left: 850px;
	}
	#star-tiny-4 {
		top: 300px;
		left: 800px;
	}
	#star-tiny-5 {
		top: 400px;
		left: 500px;
	}
	
}
@media screen and (max-width: 840px) {
	.seo-fish {
		_right: 340px;
		_top: 350px;
	}
	#logo[data-scroll="middle"] {
		background-image: url(gfx/logo_lightblue.png?x=2);
	}
}
@media screen and (max-width: 690px) {
	#shooting-outer {
		left: 220px;
		top: 320px;
	}
	.contact {
		opacity: 1;
	    top: 630px;
	    left: 170px;
	}
	.luftballong {
		top: 750px;
		left: 60px;
		width: 320px;
	}
	#starlink1 {
		top: 485px;
		left: 15px;
	}
	#starlink2 {
		top: 500px;	
		left: 200px;
	}
	#starlink3 {
		top: 600px;
		left: 10px;
	}
	#starlink4 {
		top: 535px;
		left: 50px;
	}
	#star-tiny-2 {
		top: 280px;
		left: 20px;
	}
	.redline  {
		opacity: 0;
	}
	.bridge-text {
		opacity: 1;
	}
	.seo-fish {
		right: 210px;
		bottom: 60px;
	}
}
@media screen and (max-width: 570px) {
	.bubbles {
		max-width: 50%;
	}
}
@media screen and (max-width: 480px) {
	#shooting-outer {
		left: 100px;
		top: 420px;
	}
	#shooting-star {
		left: 100px;
	}
	.contact {
		top: 810px;
		left: 60px;
	}
	.luftballong {
		opacity: 0;
	}
	#starlink1 {
		top: 600px;
		left: 70px;
	}
	#starlink2 {
		top: 585px;	
		left: 190px
	}
	#starlink3 {
		top: 655px;
		left: 30px;
	}
	#starlink4 {
		top: 695px;
		left: 140px;
	}
	.seo-fish {
		_right: 230px;
		left: 60px;
		right: auto;
		bottom: 30px;
		_top: 740px;
	}
	.bubbles {
		right: 50px;
		max-width: 55%;
	}
}
@media screen and (max-width: 400px) {
	.bubbles {
		max-width: 60%;
	}
	.seo-fish {
		bottom: 0px;
		background-postion: bottom left;
	}
	#shooting-outer {
		top: 440px;
	}
}

@media screen and (max-width: 370px) {
	.bridge-text {
		top: 480px;
	}
}
@media screen and (max-width: 355px) {
	.bridge-text {
		top: 510px;
	}
	#shooting-outer {
		left: 80px;
		top: 500px;
	}
	#starlink1 {
		top: 650px;
		left: 10px;
	}
	#starlink2 {
		top: 635px;	
		left: 120px
	}
	#starlink3 {
		top: 705px;
		left: 30px;
	}
	#starlink4 {
		top: 745px;
		left: 110px;
	}
	.contact {
		top: 870px;
		left: 60px;
	}
}