/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                     RESET                       */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {box-sizing: border-box;-moz-box-sizing: border-box }

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                TYPOGRAPHY                       */
html {
	font-family: 'Open Sans', 'open-sans', sans-serif;
	font-size: 10px;
	scroll-behavior: smooth;
}
h1, .margins h2, .margins h4 {
	line-height: 1.2em;
	text-transform: uppercase;
}
h1 {
	font-size: 3.6rem;
	font-weight: 300;
	margin: 0 0 8rem;
	color: #444;
	text-align: center;
}
.margins h2, .margins h2 span {
	font-size: 2.4rem;
	font-weight: 800;
	margin: 0 0 1.2rem;
	color: #323232
}
.margins h3 {
	font-size: 2.1rem;
	font-weight: 600;
	margin-bottom: .5rem;
	color: #c62b1b;
}
.margins h4, .margins h4 span {
	font-size: 2.4rem;
	font-weight: 300;
	color: #34485e;
	margin-bottom: 1rem
}
.margins p, .margins ul {
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.3em;
	margin: 0 0 2rem;
	color: #686868
}
a {
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}
strong {
	color: #243242
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                   BUTTONS                       */

.button {
	display: inline-block;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 4.3rem;
	padding: 0 4.9rem;
	background-color: #e84d3c;
	color: #fff;
	border-radius: .4rem;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
}
.button:hover {
	background-color: #ff5845;
}
#button_more {
	background-color: #229dd3;
	padding-right: 3.1rem !important;
}
#button_more:hover {
	background-color: #25b3f0;
}
#button_more:after {
	content: '';
	display: inline-block;
	height: 1.2em;
	width: 1.2em;
	margin-left: .3em;
	background: url(../img/arrow_down.svg);
	vertical-align: sub
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    LAYOUT                       */

html, body {
	height: 100%;
	text-align: center
}
section, footer {
	position: relative;
	padding: 12rem 0 9.5rem
}
section.smoke {
	background-color: #fafafa
}
#about {
}
.margins {
	max-width: 120rem;
	margin: 0 auto;
	position: relative;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                      HERO                       */

#hero {
	padding: 0;
	height: 100%;
	background: url(../img/hero_01.jpg) right center;
	background-size: cover;
	background-color: #07080d;
	color: #fff;
}
#hero.bg1 {
	background-image: url(../img/hero_01.jpg)
}
#hero.bg2 {
	background-image: url(../img/hero_02.jpg)
}
#hero.bg3 {
	background-image: url(../img/hero_03.jpg)
}
#hero.bg4 {
	background-image: url(../img/hero_04.jpg)
}
#hero.bg5 {
	background-image: url(../img/hero_05.jpg)
}
.logos {
	padding: 4rem 0 1rem
}
#bottom_action {
	position: absolute;
	bottom: 6rem;
	left: 0;
	width: 100%
}
#hero h1 {
	color: #fff;
	font-size: 7.4rem;
	margin: 8rem 0 0.7rem
}
#hero h2 {
	font-size: 2.4rem;
	font-weight: 300;
}
.button.register {
	margin-top: 8rem;
	padding: 1em 3em .8em;
	line-height: 1em
}
#logo_atomia {
	display: inline-block;
	font-size: 0;
	height: 2.8rem;
	width: 11.3rem;
	background: url(../img/atomia_w.svg) center center no-repeat;
	background-size: cover
}
#logo_iis {
	display: inline-block;
	font-size: 0;
	margin-right: 6rem;
	height: 4.2rem;
	width: 4.2rem;
	background: url(../img/iis_w.svg) center center no-repeat;
	background-size: cover
}
.badge {
	width: 20rem;
	height: 20rem;
	margin: 8rem auto 0;
	padding: 6rem 1rem 0;
	background-color: #c90062;
	color: #fff;
	font-size: 2rem;
	border-radius: 50%;
}
.quiet {
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.7);
	text-transform: none;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                      TLDS                       */

#tlds {
	background-color: #192430;
	padding: 4rem 0
}
#tlds h3 {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 300;
	margin-bottom: 2rem
}
#tlds h2 {
	margin-bottom: 0
}
#tlds h2 span {
	color: #fff;
	margin: 0 1rem
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                   WHAT IS                       */

.col_set {
	text-align: center
}
.col_3 {
	display: inline-block;
	vertical-align: top;
	width: 27%;
	min-width: 26rem;
	margin: 0 3% 4rem;
	text-align: left
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                  TIMELINE                       */

.day {
	max-width: 75rem;
	margin: 0 auto
}
.day + .day {
	margin-top: 10rem
}
.day_badge, .event {
	max-width: 60rem;
	text-align: left;
	margin-left: 19rem;
	padding: 0 0 10rem 5rem;
	border-left: 1rem solid #e74c3c;
	position: relative
}
.day_badge {
	min-height: 17rem
}
.day_badge h1 {
	position: absolute;
	left: -6rem;
	background-color: #e74c3c;
	color: #fff;
	width: 11rem;
	height: 11rem;
	border-radius: 50%;
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 4.2rem;
	text-align: center;
	margin: 0;
	padding-top: .7rem
}
.day_badge h1 span {
	font-size: 6rem;
	font-weight: 800;
}
.event.last {
	border-left-color: transparent
}
.event:before {
	content: '';
	position: absolute;
	top: -1rem;
	left: -3rem
}
.event:before, .mark {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background-color: #fff;
	border: 1rem solid #e74c3c;
}
.event.party:before {
	width: 6rem;
	height: 6rem;
	top: -1.8rem;
	left: -3.5rem;
	border-radius: 0;
	border: none;
	background: url(../img/party_mark.svg) center center no-repeat;
	background-size: cover;
}
.event.coffee:before {
	width: 6.4rem;
	height: 6rem;
	top: -1.8rem;
	left: -3.1rem;
	border-radius: 0;
	border: none;
	background: url(../img/coffee.svg) center center no-repeat;
	background-size: cover;
}
.event.lunch:before {
	width: 8.3rem;
	height: 5rem;
	top: -1.2rem;
	left: -4.75rem;
	border-radius: 0;
	border: none;
	background: url(../img/lunch.svg) center center no-repeat;
	background-size: cover;
}
.event h2, .event h3 {
	margin-bottom: .2rem
}
.event > h4 {
	position: absolute;
	left: -20rem;
	top: 0
}
.event > p:last-child {
	margin-bottom: 0
}
.desc {
	max-height: 0;
	overflow: hidden;
	margin-bottom: 1rem;
	transition: max-height 1s ease-in-out;
	-webkit-transition: max-height 1s ease-in-out;
	-moz-transition: max-height 1s ease-in-out;
}
.event.expanded .desc {
	max-height: 200rem
}
.event .button {
	padding: 0 3.6rem;
	line-height: 2em
}
.sp_list li {
	min-height: 6rem;
	padding: 1.4rem 0 0 6rem;
	font-weight: 300;
	position: relative
}
.sp_list span {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	background-size: contain;
	vertical-align: middle;
	background-image: url(../img/sp_generic.png)
}


/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                  SPEAKERS                       */

.speaker {
	width: 28rem;
	margin-bottom: 5rem;
	display: inline-block;
	vertical-align: top
}
.speaker div {
	border-radius: 50%;
	width: 16rem;
	height: 16rem;
	margin: 0 auto 2rem;
	background-image: url(../img/sp_generic.png);
	background-size: contain
}
.sp_fc {
	background-image: url(../img/sp_francesco.jpg) !important
}
.sp_mh {
	background-image: url(../img/sp_henneke.jpg) !important
}
.sp_js {
	background-image: url(../img/sp_jeanette.jpg) !important
}
.sp_je {
	background-image: url(../img/sp_jimmie.jpg) !important
}
.sp_jj {
	background-image: url(../img/sp_juhani.jpg) !important
}
.sp_lg {
	background-image: url(../img/sp_lg.jpg) !important
}
.sp_mn {
	background-image: url(../img/sp_michele.jpg) !important
}
.sp_pf {
	background-image: url(../img/sp_peterforsman.jpg) !important
}
.sp_sg {
	background-image: url(../img/sp_steinar.jpg) !important
}
.sp_tc {
	background-image: url(../img/sp_torbjorn.jpg) !important
}
.sp_koh {
	background-image: url(../img/sp_katrin.jpg) !important
}
.sp_jb {
	background-image: url(../img/sp_jimmy.jpg) !important
}
.sp_lf {
	background-image: url(../img/sp_lisa.jpg) !important
}
.sp_fr {
	background-image: url(../img/sp_rios.jpg) !important
}
.sp_ht {
	background-image: url(../img/sp_hilde.jpg) !important
}
.sp_bb {
	background-image: url(../img/sp_brian.jpg) !important
}
.sp_sk {
	background-image: url(../img/sp_sascha.jpg) !important
}
.sp_fm {
	background-image: url(../img/sp_filippa.jpg) !important
}
.sp_ee {
	background-image: url(../img/sp_elisabeth.jpg) !important
}
.sp_pl {
	background-image: url(../img/sp_peterlarsen.jpg) !important
}
.sp_ko {
	background-image: url(../img/sp_kristian.jpg) !important
}
.sp_ks {
	background-image: url(../img/sp_kirsi.jpg) !important
}
.sp_jpj {
	background-image: url(../img/sp_jens.jpg) !important
}
.sp_jl {
	background-image: url(../img/sp_jenny.jpg) !important
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                  LOCATION                       */

#location {
	padding: 0 0 2rem
}
#map {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 36rem;
	background: #d0d4d8 url(../img/map.jpg) center center;
	background-size: cover
}
#popup {
	display: inline-block;
	margin-bottom: 5rem;
	padding: 2rem 5rem;
	background-color: #34485e;
	border-radius: .5rem;
	position: relative
}
#popup:after {
	content: '';
	position: absolute;
	bottom: -4rem;
	left: 50%;
	margin-left: -2rem;
	border: 2rem solid rgba(52, 72, 95, 0);
	border-top-color: #34485e
}
#popup h1, #popup p {
	color: #fff;
}
#popup h1 {
	font-size: 2.4rem;
	margin-bottom: 0;
}
#popup p {
	font-size: 1.5rem;
	margin: 0 auto
}
#location .mark {
	position: absolute;
	bottom: 42%;
	left: 50%;
	margin-left: -2.5rem
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                  SPONSORS                       */

#sponsors .margins {
	max-width: 86rem
}
.sponsor {
	display: inline-block;
	font-size: 0;
	margin: 3rem;
	height: 4.2rem;
	background: center center no-repeat;
	background-size: contain;
	vertical-align: middle
}
#sponsor_01 {
	background-image: url(../img/atomia.svg);
	width: 11.3rem;
}
#sponsor_02 {
	background-image: url(../img/iis.svg);
	width: 4.2rem;
}
#sponsor_03 {
	background-image: url(../img/sponsor_03.svg);
	width: 13.3rem;
	height: 3rem
}
#sponsor_04 {
	background-image: url(../img/sponsor_04.svg);
	width: 25.4rem;
}
#sponsor_05 {
	background-image: url(../img/sponsor_05.png);
	width: 111px;
	height: 3rem
}
#sponsor_06 {
	background-image: url(../img/sponsor_06.svg);
	width: 10rem;
}
#sponsor_07 {
	background-image: url(../img/sponsor_07.svg);
	width: 16.3rem;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    FOOTER                       */

footer {
	background-color: #192430;
	color: #bcbcbc;
	padding-bottom: 3rem
}
footer:before {
	content: '';
	display: block;
	height: 18.5rem;
	margin: -18.5rem 0 12rem;
	background: #fff url(../img/footer_skyline.png) center bottom no-repeat;
	background-size: contain
}
footer .margins p {
	color: #bcbcbc
}
footer .margins h2 {
	color: #fff
}
footer a {
	color: #e74c3c
}
footer a:hover {
	color: #ff5845
}
.margins ul.links {
	margin: 2rem 0 3rem
}
.links li {
	display: inline;
}
.links a {
	margin: 0 4rem;
	line-height: 2em;
	white-space: nowrap
}
#copyright {
	color: #686868;
	margin-bottom: 0
}
#social_links li {
	display: inline
}
#social_tw, #email_us {
	position: relative;
	padding: 1.2rem 0 0 5.4rem
}
#social_tw:before, #email_us:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4.6rem;
	height: 4.6rem;
	font-size: 0;
	background: url(../img/social_tw.svg) center center no-repeat;
	background-size: cover;
	border-radius: 50%;
}
#email_us:before {
	background-image: url(../img/email.svg)
}
.no_wrap {
	white-space: nowrap
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    RETINA                       */
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
	
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                              BREAK POINTS                       */

@media only screen 
and (max-width : 1024px) {
	.margins, #hero {
		padding: 0 2rem
	}
	#hero h2 {
		text-shadow: 0 0 6px #46516d
	}
}
@media only screen 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#hero h1 {
		font-size: 6.7rem;
	}
}
@media only screen
and (max-width: 736px) {
	section, footer {
		padding: 5rem 0 3.5rem
	}
	.col_3 {
		margin: 0 0 2rem;
		width: 100%
	}
	h1 {
		margin-bottom: 5rem
	}
	#hero h1 {
		font-size: 4rem;
		margin-top: 3rem
	}
	#hero h2 {
		font-size: 1.7rem
	}
	.speaker {
		margin-bottom: 3rem
	}
	.sponsor {
		display: block;
		margin: 0 auto 6rem
	}
	#sponsors a:last-child {
		margin-bottom: 10rem
	}
	.day_badge, .event {
		margin-left: 1rem;
		padding-bottom: 5rem
	}
	.event > h4 {
		position: static
	}
	#popup h1 {
		font-size: 2.2rem
	}
	.links a {
		margin: 0 1rem
	}
}
@media only screen
and (max-device-width: 736px) {
	#hero #button_more {
		display: none
	}
}