/*
Theme Name: 40 Staffan
Theme URI: http://www.hyperdyne.se
Author: Staffan Hesselbom
Author URI: http://hyperdyne.se
Description: Theme for 40.hesselbom.se
Version: 0.5
*/

/* 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.4em;
}

p {
	margin-bottom:1.4em;
}

a:link, a:visited, a:active {
	color:#AB000B;
	text-decoration:underline;	
}

a:hover {
	color:#DE4A00;	
}

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

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

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

body.home h2, .entry-header h1, .page-header h1 {
	font:400 48px 'Lato', sans-serif;
	line-height:normal;
	margin-top:0;
	margin-bottom:1em;
	text-align:center;
}

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

}



h3 {
	font:400 28px 'Lato', sans-serif;
	margin:2em 0 0.5em;
	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:#13001C;
	border-bottom:1px solid #fff;
	background-repeat:no-repeat;
	background-position:bottom center;
	background-size:cover;
}

body.home .main-title-wrapper {
	background-image:url(img/top-background.jpg);
	background-position:top center;
}


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

#main-title img { 
	display:block;
	margin:auto;
}



body.home #main-title { 
    padding:60px 0 43px;
	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;
    
}

/* 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,
img {
	height: auto;
	max-width: 100%;
}

.not-responsive {
	width:auto;
	
}

.aligncenter.not-responsive  {
	margin:2em auto 1em;
	
}

#main-footer {
	clear:both;
	margin-top:4em;	
	background-color: #000; 
    border-top: 10px solid #232323;
    padding-top: 1%;
    padding-bottom: 2%;
	color:#fff;
	
}

#main-footer img {
	display: block;
    margin: 0 auto;
	
}




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


/* p label span input 
form {margin-top: 2rem;}
input[type=text], input[type=number], input[type=email]  { width:100%; padding:0.75rem 0.5rem; border:1px solid #999; border-radius: 0.2rem; font-size:inherit; margin-top: 0.1rem; }
textarea { width:100%; height:172px; padding:0.5rem; border:1px solid #999; border-radius: 0.2rem;}
label { margin-bottom: 1rem; }
label span {  }
input[type=number].wpcf7-number { width: 100px; }
input:focus, textarea:focus { box-shadow: 0px 0px 4px rgba(171,0,11,0.5); border-color: #AB000B; }
input[type=submit] { padding:0.75rem 0.5rem; border-radius: 0.2rem;  font-size:inherit; margin-top: 0.1rem; width: 50%; color: #fff; background-color: #277e2d; border: none; }
*/

form {margin-top: 2rem;}
textarea { height:172px; }
input[type=number].wpcf7-number { width: 100px; }
label { margin-bottom: 1rem; color:#666;}
input[type=submit] { padding:0.75rem 0.5rem;  font-size:inherit; margin-top: 0.1rem; width: 200px; color: #fff; background-color: #277e2d; border: none; }

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

@media only screen and (min-width : 320px) {	
	body.home #main-title { 
		width:300x;
		font:100 28px/28px 'Lato', sans-serif; 
	}
	
}

@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;

	}
	
	/* .page #main-title img, .single #main-title img, .blog #main-title img, .archive #main-title img   {
		max-width:80%;
		
	} */
	
	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;
	}

	

	
}

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



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


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

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