html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body {line-height: 1; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }
table {border-collapse: collapse; border-spacing: 0; }

@font-face {font-family: 'Chapman'; font-weight: normal; src: url("Chapman.otf") format("opentype"); }


body 			{ font-family: 'Chapman'; background: #f3f4f6 url(../img/bg-hjm-hermanni-maki-norway-scotland.jpg) no-repeat fixed 100% 100% / cover;  text-align: left; color: #292e36; background-position: 100% 0; transition: all 0.5s ease; }

* {touch-action: none;}
body { touch-action: chained; }

a 				{ text-decoration: none; color: #292e36; }
a:hover 		{ color: #8c8a8a; }

.container 		{ margin: 0 80px; }

.titles			{ position: absolute; top: 30%; left: 10%; transition: all 0.5s ease; }

.titles	.logo	{ margin-right: 0.5em; }
h1 				{ text-transform: uppercase; word-spacing: 0.1em; font-size: 6vw; }
h2 				{ color: #8c8a8a; font-size: 4vw; }

.links 			{ position: absolute; bottom: 80px; left: 10%; font-size: 4vw; text-align: left; width: auto; color: #8c8a8a; }
.links a		{ margin-right: 0.6em; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; }
.links a .link	{ }
.float-right	{ float: right; }

.links a .bubbles 	{  position: absolute; top: 55%; left: 60%; }
.links a .bubble 	{ width: 5px; height: 5px; opacity: 0; border-radius: 50%; border: 0; background-color: #ccc; display: block; position: absolute; z-index: -1; -webkit-transition: all 0.7s; transition: all 0.7s; }
.links a:hover .bubble 		{ opacity: 1; }
.links a:hover .bubbles-1 .bubble-1 	{ transform: scale(13, 13); top: 0px; left: 53%; }
.links a:hover .bubbles-1 .bubble-2 	{ transform: scale(9, 9); top: 7px; left: auto; right: -25px; }
.links a:hover .bubbles-1 .bubble-3 	{ transform: scale(10, 10); top: 0px; left: -22px; }
.links a:hover .bubbles-1 .bubble-4 	{ transform: scale(9, 9); top: -14px; left: auto; right: -18px; }

.links a:hover .bubbles-2 .bubble-1 	{ transform: scale(13, 13); top: -5px; left: -14px; }
.links a:hover .bubbles-2 .bubble-2 	{ transform: scale(11, 11); top: -8px; left: auto; right: -19px;}
.links a:hover .bubbles-2 .bubble-3 	{ transform: scale(10, 10); top: -12px; left: -30px; }
.links a:hover .bubbles-2 .bubble-4 	{ transform: scale(9, 9); top: 14px; left: auto; right: -1px; }

.links a:hover .bubbles-3 .bubble-1 	{ transform: scale(11, 11); top: -11px; left: 19px; }
.links a:hover .bubbles-3 .bubble-2 	{ transform: scale(13, 13); top: 7px; left: -10px; }
.links a:hover .bubbles-3 .bubble-3 	{ transform: scale(10, 10); top: -11px; left: -7px; }
.links a:hover .bubbles-3 .bubble-4 	{ transform: scale(9, 9); top: -9px; left: -30px; }

.links a:hover .bubbles-4 .bubble-1 	{ transform: scale(13, 13); top: 0px; left: auto; right: 53%; }
.links a:hover .bubbles-4 .bubble-2 	{ transform: scale(9, 9); top: 7px; left: -25px; }
.links a:hover .bubbles-4 .bubble-3 	{ transform: scale(10, 10); top: 0px; left: auto; right: -22px; }
.links a:hover .bubbles-4 .bubble-4 	{ transform: scale(9, 9); top: -14px; left: -18px; }

.links a:hover .bubbles-5 .bubble-1 	{ transform: scale(13, 13); top: -8px; left: -23px; }
.links a:hover .bubbles-5 .bubble-2 	{ transform: scale(11, 11); top: -15px; left: auto; right: -17px; }
.links a:hover .bubbles-5 .bubble-3 	{ transform: scale(9, 9); top: -15px; left: -49px; }
.links a:hover .bubbles-5 .bubble-4 	{ transform: scale(12, 12); top: 3px; left: 4px; }


.ninchat-embed-container { box-shadow: none !important; top: 0 !important; }
.ninchat-ball, .ninchat-sidebar	{ display: none !important; }


@media (min-width: 800px){

body#hjm-body.packed .titles { /*-position : calc(300px) 0;*/ left: 360px; }
/*
.ninchat-embed-container { top: 0 !important; }
#poweredbyninchat { font-size: 28px; text-transform: uppercase; position: absolute; bottom: 20px; text-align: center; width: 200px; left: 50%; margin: 0 0 0 -100px; color: #b2b2b2; }
*/
}

@media (max-width: 1200px){

body 			{ background-size: cover; background-position: 60% 100%; }

}

@media (max-width: 1023px){

.titles 		{ text-align: left; left: 40px; }
h1 				{ font-size: 4em; }
h2 				{ font-size: 3em; }
.links 			{ font-size: 3em; left: 40px; }

}

@media (max-width: 799px){

body 			{ background-position: 110% 100%; }

.titles  		{ top: 15%; }

.links 			{ bottom: 40px; }

/*
.container 		{ margin: 0 40px; }

.titles 		{ text-align: left; left: 40px; }
h1 				{ font-size: 8vw; }
h2 				{ font-size: 6vw; }

.links 			{ font-size: 5vw; }
*/

.ninchat-embed-container { top: auto !important; bottom: 0 !important; display: none !important; }
.ninchat-embed-container.ninchat-open { display: block !important; height: 100% !important; }
}

@media (max-width: 599px){

.titles  		{ text-align: right; top: 20%; left: auto; right: 40px; }
.titles .logo 	{ display: block; margin: 0; }

.links 			{ left: auto; right: 0; text-align: right; right: 40px; }
.links a		{ margin-left: 0; margin-right: 0; display: block; }
/*
.hide-small 	{ display: none; }

h1 				{ font-size: 9vw; }
h2 				{ font-size: 7vw; }

.links 			{ font-size: 6vw; }
.links a		{ margin-left: 0; margin-right: 20px; }
.links a.float-right { margin-right: 0; }
*/
}

@media (max-height: 499px){
.ninchat-embed-container.ninchat-open { height: 100% !important; }
}

@media (max-width: 479px){

body 			{ background-size: cover; background-position: 110% 100%; }

.float-right	{ float: none; margin-top: 20px; }

/*
h1 				{ font-size: 10vw; }
h2 				{ font-size: 8vw; }

.links a .bubbles { left: 30px; }
*/
}

@media (max-width: 359px){
/*
.hide-tiny 		{ display: none; }

.titles 		{ top: 20%; max-width: 300px; }
h1 				{ font-size: 13vw; }
h2 				{ font-size: 10vw; line-height: 7vw; }

.links 			{ font-size: 10vw; }
*/
}