/*
Theme Name: Hyperdyne
Theme URI: http://www.hyperdyne.se
Author: Staffan Hesselbom
Author URI: http://hyperdyne.se
Description: Theme for Hyperdyne.se
Version: 0.7
*/

/* Reset default browser CSS. 
   Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
----------------------------------------------------------------------------------- */
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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
:focus { outline: 0; }
body { background: #fff; line-height: 1; }
ol, ul { list-style: none; }
table {/* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
/* End reset */

/* Assistive text */
.assistive-text { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); }
#access a.assistive-text:active, #access a.assistive-text:focus { background: #eee; border-bottom: 1px solid #ddd; color: #1982d1; clip: auto !important; font-size: 12px; position: absolute; text-decoration: underline; top: 0; left: 7.6%; }


/* Hyperdyne css */
.clear-fix:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; }

* {
	-o-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}


body {
	background: #fff;
    color: #333;
	font: 16px Arial, sans-serif;
	line-height: 1.525em;
}

p {
	margin-bottom:1em;
}

a:link, a:visited, a:active {
	color:#359de5;
	text-decoration:none;	
}

a:hover {
	color:#ff5e5e;	
}

.alignleft {
	float: left;
	margin:0.5em 2em 0.5em -4em;
}

.alignright {
	float: right;
	margin:0.5em -4em 0.5em 2em;
}

.aligncenter {
	display: block;
	margin:2em auto;
	width:100%;
	height:100%;
}

body.home h2, .entry-header h1, .page-header h1 {
	font:100 36px 'Lato', sans-serif;
	line-height:normal;
	margin-top:0;
	margin-bottom:0.5em;
	text-transform:uppercase;
	text-align:center;
}

h2 {
	font:400 30px 'Lato', sans-serif;
	margin:1em 0 0.3em;

}

h2 a:link, h2 a:active, h2 a:visited {
	color:#333;
}

h2 a:hover {
	color:#ff5e5e;	
}

h3 {
	font:400 24px 'Lato', sans-serif;
	margin:1em 0 0.3em;
	font-style:normal;
}

h4 {
	font-weight:bold;
	margin:1em 0 0.3em;
}

em {
	font-style:italic;
}

strong {
	font-weight:bold;
}

ul { 
	list-style:inside;
}

li { 
	margin:0.2em 0;
}

body.page .attachment-post-thumbnail { margin:1em 0; }

/* Head */
#main-head {
    
}
.main-title-wrapper {
    background-color:#359de5;
	border-bottom:1px solid #fff;
}

#main-title { 
    padding:2em;
    clear:both;
    letter-spacing:-0.025em;
    text-transform:uppercase;
	font:100 26px/26px 'Lato', sans-serif;
	text-align:center; 
}

body.home #main-title { 
    padding:2em 1em;
	text-align:left;
}

#main-title h1 span {
    font-weight:900;
    letter-spacing:normal;
	margin-right:0.2em;
}

body.home #main-title h1 span {
	margin-right:0;
}

#main-title h1 a {
    text-decoration:none;
    color:#fff;
    
}

#main-title img {
    float: left;
	margin:0 1em 0 0;
    max-width: 160px;
}

#main-title div {
}

/* Content */
.width-area {
    margin:auto;
	padding:0 2em;
	max-width:1000px;
}

article.page, article.error404 {
    padding:4em 0;
}

#page { width:100%; }


.comment-content img[height],
.entry-content img,
.entry-summary img,
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"],
#site-header img {
	height: auto;
}

img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
	height: auto;
	max-width: 100%;
}

.entry-thumbnail img {
	width:100%;
	height:100%;
	
}

.attachment-thumbnail {
	max-width:100%;
	height:auto;
}

.latest-blogs {
	background-color:#f8f8f8;
	padding:4em 0;
}

.latest-blogs h2 {
	color:#333;
	margin-bottom:1em;
}

#main-footer {
	clear:both;
	margin-top:4em;	
	background-color: #FF5E5E; /*FF0066*/
    padding: 4em 0;
	color:#fff;
}
#main-footer p {
	margin-bottom:0;
}


#contact-info {
	font:100 64px/84px 'Lato', sans-serif;
	text-align:center;
}

#contact-info p {
	padding:0 0;
}

#social-icons {
	clear:both;
	text-align:center;
	margin:5% auto 2em;
}

#social-icons li {
	display:inline;
	margin:0 0.5%;
}

#social-icons img {
	width:7%;
}


.blog .post, .archive .hyperdyne_projekt {
	margin-bottom:6em;
	
}


/* Latest blog posts */
.latest-blogs ul {
	list-style:none;
}

.latest-blogs li {
	font-size:14px;
	line-height:19px;
}


.latest-blogs li a h1   {
	text-decoration:none;
	font:400 21px/24px 'Lato', sans-serif;
}

body.home .latest-blogs .entry-content {
	margin:0.5em 0;
}

.entry-content {
	margin:0.5em auto;
	max-width:640px;
	padding:0;
}

.blog-post-content {
	background-color:#fff;
	padding-top:4em;
}

.blog-post-img-shift {
	z-index:999;
	position:relative;
	margin-top:-6em;
	padding-top:3em;
}

home .entry-meta {
	margin-top:1em;
	margin-bottom:0;
}


.entry-meta {
	font-size:12px;
	color:#999;
	margin-top:0;
	margin-bottom:1em;
}

.entry-meta .entry-date {
	float:left;
	margin-right:2em;
}

.entry-meta .categories h4, .entry-meta .tags h4 {
	float:left;
	font-weight:normal;
	margin:0 0.5em 0 0;
}

.entry-meta .categories {
	float:left;
	margin-right:2em;
}

.entry-meta .tags ul {
	list-style:none;
	float:left;
}

.entry-meta .tags ul li{
	float:left;
	margin:0 0.75em 0 0;
	
}

.single .entry-meta {
	text-align:center;
	margin-bottom:1.5em;
}

.single .entry-meta .entry-date {
	float:none;
}

.single .entry-content .entry-meta {
	margin:2em 0;
}


.latest-blogs .entry-meta a {
	color:#666;
	text-decoration:none;
}

.latest-blogs .entry-meta span {
	margin-right:2em;
}

/* Blog listing */
.blog #main-head, .archive #main-head {
	margin-bottom:4em;
}

.blog .entry-thumbnail, .archive .entry-thumbnail {
	margin-bottom:1em;
}

/* Case widget */
#case-frontpage  {
	background-color:#fff;
	padding:4em 0;
}

#case-frontpage ul  {
	list-style:none;
}

#case-frontpage li.case {
	border-top:1px solid #ccc;
	width:100%;
	height:auto;
	margin:6em 0 2em 0;
	padding-top:6em;
	
}

#case-frontpage li.case:first-child {
	border-top:none;
	margin:2em 0 0 0;
	padding-top:0;
	
}

a.more-cases {
	display:block;
	padding:0.75em 0;
	margin:4em 0 6em;
	background-color:#eee;
	color:#359de5;
	font:400 18px 'Lato', sans-serif;
	line-height:normal;
	text-align:center;
}

a.more-cases:hover {
	color:#fff;
	background-color:#ff5e5e;
}

#case-frontpage li a {
}

#case-frontpage li a:hover {
}

#case-frontpage li a .case-wrapper {
	width:60%;
	margin:2em auto 0;

}

#case-frontpage li a .case-wrapper p {
	
}



#case-frontpage li a .case-wrapper h1 {
	margin-bottom:16px;
	
	font:400 28px/28px 'Lato', sans-serif;
	text-align:center;
}

#case-frontpage li .entry-content {
	color:#333;
	font:400 14px/19px 'Lato', sans-serif;
	margin:0;

}

#case-frontpage li a:link, #case-frontpage li a:active, #case-frontpage li a:visited  {

}

#case-frontpage li a:hover {

}

#case-frontpage li img {
	width:100%;
	margin:0;

}

.customer-logos li {
	width:30%;
	float:left;
}

/* Images */
.attachment-thumbnail {
	margin-bottom:1em;
}

/* More link */
.more-link {
	margin-left:0.5em;
	
}

.more-link:hover {
	
}

/*
.more-link {
	display:block;
	margin-top:1.4em;
	background-color:#eee;
	text-align:center;
	padding:0.25em 0;
	
}

.more-link:hover {
	background-color:#f8f8f8;
	
}  */

.post-nav {
	margin:2em auto;
}

.post-nav strong {
	font-size:11px;
	color:#999;
	text-transform:uppercase;
	
}

.post-nav strong:after { content:"\A"; white-space:pre; }

.nav-previous {
	float:left;
}

.nav-next {
	float:right;
	text-align:right;
}

/* Comments */
#comments { /* clear:both; margin-top:2em; */ }
#comments p { font-size:90%; }
#comments ul, #comments ol { list-style:none; }
#comments-title { font:100 26px/26px 'Lato', sans-serif; line-height:normal;  margin:2em 0; padding:1em 0; border-bottom:1px solid #eee; border-top:1px solid #eee;  }
.commentlist .post { background:none; }
.commentlist li { margin-bottom:2em; padding-bottom:1em; border-bottom:1px solid #eee; }
.comment-author { font-size:110%; overflow:hidden;  }
.comment-author span { display:inline-block; }
.comment-author a:link, .comment-author a:visited, .comment-author a:active { color:#333; }
.comment-author a:hover { color:#4f9b2f; }
.comment-author cite { font-style:normal;}
.comment-author .avatar { float:left; margin:0 20px 0 0; }
.comment-meta { font-size:0.6em; }
.comment-body { clear:both; margin:1.5em 0; font-size:90% }
.reply { font-size:80%; margin-bottom:3em; }

.depth-2 { background-color:#f8f8f8; margin:1em 0 1em 1em; padding:1em; border-bottom:none; }
.depth-3 { background-color:#fff; margin:1em 0 1em 1em; padding:1em; border-bottom:none; }
.depth-4 { background-color:#f1f1f1; margin:1em 0 1em 1em; padding:1em; border-bottom:none; }
.depth-5 { background-color:#fff; margin:1em 0 1em 1em; padding:1em; border-bottom:none; }

#respond p { margin:0 0 1.2em 0; color:#666;  }
#respond span { margin:0 0 1em 0; display:block; }
#respond span input { max-width:267px; padding:0.5em; border:1px solid #b8b7b7; }
#respond .form-submit input { margin-left:155px;  }
#respond textarea { max-width:80%; height:172px; padding:0.5em; border:1px solid #b8b7b7; }
#respond label { color:#333; width:155px; vertical-align:top; display:inline-block; font-size:90%; }
#respond label span { color:#999; font-size:70%; line-height:1.4em; }

h3#reply-title{ font-size: 110%;  }


/* Projekt */
.projekt-content {
	margin-top:3em;
	
}

.projekt-content .entry-thumbnail {
	margin-bottom:2em;
}

.menu li a:link, .menu li a:visited, .menu li a:active {
	font:400 16px 'Lato', sans-serif;
	display:block;
	color: #fff; /* #359de5 */
	text-decoration:none;
	text-decoration:none;
	transition:background-color 0.2s;
}


@media only screen and (max-width : 320px) {
	body.home #main-title { 
		max-width:340px;
		font:100 28px/28px 'Lato', sans-serif; 
	}
	
	#contact-info {
		font:100 20px/30px 'Lato', sans-serif;
	}
}

@media only screen and (min-width : 320px) {	
	body.home #main-title { 
		max-width:340px;
		font:100 20px/20px 'Lato', sans-serif; 
	}
	
	#main-title img {
		max-width: 60px;
	}
	
	#contact-info {
		font:100 20px/30px 'Lato', sans-serif;
	}
	
	.front-page-about {	
		column-count:auto;
	}
	
	.latest-blogs li {
		float:none;
		margin-right:0;
		width:100%;
		margin-bottom:6%;
		overflow:auto;
	}
}

@media only screen and (max-width : 480px) {
	body {
		font: 14px Arial, sans-serif;
		line-height: 1.425em;
	}
	
	#main-title { 
		letter-spacing:-0.025em;
		font:400 16px/16px 'Lato', sans-serif;
	}
	
	
	
	
	#main-title h1 a { 
		color:#d7ebfa;

	}
	
	#main-title h1 a span { 
		color:#fff;

	}
	
	
	body.home h2, .entry-header h1, .page-header h1 {
		font:400 24px 'Lato', sans-serif;
	}
	
	h2 {
		font:400 21px 'Lato', sans-serif;
	}
	
	h3 {
		font:400 18px 'Lato', sans-serif;
	}

	#case-frontpage li a .case-wrapper {
		width:80%;
	}
	
	#case-frontpage li a .case-wrapper h1 {
		margin-bottom:16px;
		font:400 20px/20px 'Lato', sans-serif;
	}
	
	#case-frontpage li .entry-content {
		font:400 13px 'Lato', sans-serif;
		line-heigt:1.425em;
	}
	
	.latest-blogs li {
		font-size:13px;
		line-height:19px;
	}
	
	.latest-blogs li h1 a  {
		text-decoration:none;
		font:400 18px/1em 'Lato', sans-serif;
	}
	
	.blog-post-img-shift {
		margin-top:0em;
	}


	
}

@media only screen and (min-width : 480px) {
	body.home #main-title { 
		width:480px;
		font:100 28px/28px 'Lato', sans-serif; 
	}
	
	#main-title img {
		max-width: 80px;
	}
	
	
	#contact-info {
		font:100 28px/38px 'Lato', sans-serif;
	}
}

@media only screen and (max-width : 600px) {
	.post-nav {
		padding:0 2em;
	}

	.nav-handler {
		display:block;
		padding:1em 2em;
		border-bottom:1px solid #fff;
		color:#fff!important;
	}
	
	.menu-huvudmeny-container {
		display:none;
	}
	
	.menu-huvudmeny-container-visible {
		display:block;
	}
	
	#main-nav {
		background-color:#359de5;	
	}
	
	#main-nav .width-area {
		width:100%;
		padding:0;
	}
	
	.menu li {
		margin:0;
		list-style:none;
		border-bottom:1px solid #fff;
	}
	
	.menu li a:hover, a.nav-handler:hover {
		text-decoration:underline;
		background-color:#FF5E5E;
		color:#fff!important;
		transition:all 0.1s;
	}
	
	a.nav-handler:hover {
		text-decoration:none;
	}


	.menu li a {
		padding:1em 2em;
	}
	
	.current-menu-item {
		background-color:#FF5E5E;	
	}
	

	.current-menu-item a {
		color:#fff;	
	}
	
	.customer-logos li {
		width:100%;
		float:none;
		margin:0;
	}
	
	#case-frontpage li img {
		width:100%;
	}
	
}

@media only screen and (min-width: 600px) {
	.nav-handler {
		display:none;
	}
	
	.menu-huvudmeny-container {
		display:block;
	}
	
	body.home #main-title { 
		font:100 36px/36px 'Lato', sans-serif; 
	}
	
	#main-title img {
		max-width: 120px;
	}
	
	#contact-info {
		font:100 36px/46px 'Lato', sans-serif;
	}
	
	.front-page-about {	
		-webkit-column-count:2;
		-webkit-column-gap:4em;
		-moz-column-count:2;
		-moz-column-gap:4em;
		-o-column-count:2;
		-o-column-gap:4em;
		column-count:2;
		column-gap:4em;
	}
	
	.latest-blogs li {
		margin-right:3%;
		width:30%;
		float:left;
		margin-bottom:0;
	}

	.fixed { position: fixed; top:0; margin:auto; width:100%; z-index:9999; opacity:0.97; }
		
	#main-nav {
		background-color:#359de5;
		
	}

	.menu {
		list-style:none;
	}
	.menu li {
		margin:0;
		float:left;
		
	}
	.menu li a:hover {
		text-decoration:underline;
		background-color:#fff;
		color:#ff5e5e!important;
		transition:all 0.1s;
	}
	
	.menu li a  {
		padding:1em;
		color:#fff;
		
	}

	.current-menu-item {
		background-color:#fff;	
	}	

	.current-menu-item a {
		color:#359de5!important;	
	}
	
	.lang {
		float:right!important;
	}
}

@media only screen and (max-width : 700px) {
	.menu li a:link, .menu li a:visited, .menu li a:active {
	font:400 13px 'Lato', sans-serif;
}

	
}

@media only screen and (min-width : 768px) {
	body.home #main-title { 
		width:768px;
		font:100 48px/48px 'Lato', sans-serif; 
	}
	
	#main-title img {
		max-width: 140px;
	}
	
	#contact-info {
		font:100 48px/58px 'Lato', sans-serif;
	}
}

@media only screen and (min-width : 940px) {
	body.home #main-title { 
		width:900px;
		font:100 54px/54px 'Lato', sans-serif; 
	}
	
	#contact-info {
		font:100 54px/74px 'Lato', sans-serif;
	}
}