article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:none}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.37em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}


/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select,textarea {color: #393836;}

html {overflow-y:scroll;}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {background: #eee;text-shadow: none;}

::selection {background: #eee;text-shadow: none;}

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

img {vertical-align: middle;}

fieldset {border: 0;margin: 0;padding: 0;}

textarea {resize: vertical;
}

.chromeframe {margin: 0.2em 0;background: #393836;color: #fff;padding: 0.2em 0;}


/* ===== Kalle Styles ==================================================
   
   ========================================================================== */
@font-face {
  font-family: 'BlairMdITCTTMedium';
  src: url('../fonts/BlairMdITCTTMedium.eot?#iefix') format('embedded-opentype'),  url('../fonts/BlairMdITCTTMedium.woff') format('woff'), url('../fonts/BlairMdITCTTMedium.ttf')  format('truetype'), url('../fonts/BlairMdITCTTMedium.svg#BlairMdITCTTMedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
    /*font: 15px/20px "BlairMdITCTTMedium", serif;*/
	background: #F5F3EE;
	color: #393836;
	text-rendering: optimizeLegibility;
	min-width: 480px;
}

.wrapper {
    width: 400px;
    margin: 0 auto;
}

/* ===================
    Kalle Theme
   =================== */

.header-container .wrapper {
	border-bottom: 1px solid #393836;
	height: 159px;
}

.main-container {
	margin:20px 0;
}

.moviecontainer {
	position: relative;
}

.moviecontainer p {
	margin: 0;
}

.imagecontainer {
	width: 400px;
	height: 267px;
	position: relative;
	cursor: pointer;
}

	.imagecontainer img {
	    max-width: 100%;
	  	height: auto;
	    width: auto;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.imagelegend {
		position: relative;
		display: none;
	}
	
	.moviecontainer .imagelegend {
		display: block;
	}

	#prev, #prevFilm a {
		position: absolute;
		display: none;
		height: 100%;
		width: 40px;
		left: -40px;
		top: 0;
		background: url(../images/arrow_left.png) no-repeat 50% 50%;
		text-indent: -9999px;
	}

	#next, #nextFilm a {
		position: absolute;
		display: none;
		height: 100%;
		width: 40px;
		right: -40px;
		top: 0;
		background: url(../images/arrow_right.png) no-repeat 50% 50%;
		text-indent: -9999px;
	}

	#prev:hover, #prevFilm a:hover {
		background: url(../images/arrow_left.png) no-repeat 40% 50%;

	}

	#next:hover, #nextFilm a:hover  {
		background: url(../images/arrow_right.png) no-repeat 60% 50%;

	}

	.imagenumber {
	}

	.photoset {
		font-style: italic;
		float: right;
	}

.right {
	border-top: 1px solid #393836;
	padding: 20px 0 0;
}

/*Masonry Styles */

#masonry { width: 420px; opacity: 0; background: url(../images/loader.gif) center 45% no-repeat #F5F3EE;}

#masonry.masonry {opacity: 1; background: none;}
#masonry .post img { width: 100%; height: auto; vertical-align: bottom;}
#masonry .post a { border: none; position: relative; display: block; text-decoration: none}
#masonry .post { width:190px; margin: 0 20px 20px 0; float: left; display: inline;}
#masonry .post a .overlay {
	width: 100%;
	height: 100%;
	background: rgba(57, 56, 54, 0.8); /*#393836; */
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#masonry .post a:hover, #masonry .post a.showing {
	text-decoration: none;
}

.no-touch #masonry .post a:hover .overlay, #masonry .post a.showing .overlay {
	display: block;
}

#masonry .overlay span.shoot {
	display: block;
	width: 100%;
	position: absolute;
	text-align: center;
	margin: -16px 0 0 0;
	top: 50%;
	font-style: italic;
}

#masonry .overlay span.singleshoot {
	top: 6px;
	position: relative;
}

/*Ajax Styles*/

#ajax {
	background: url(../images/loader.gif) center 45% no-repeat #F5F3EE;
	border-bottom: 1px solid #393836;
	height: 307px;
	width: 400px;
	margin: 0 0 20px 0;
	display: none;
}

.category-motion #ajax {
	height: 265px;
}

#ajax.noloader {
	background: none;
}

/* ===================
    Typography
   =================== */

h1 {
    font-weight: normal;
 	font-size: 36px;
	line-height: 20px;
	margin: 0 0 0 -2px;
	text-transform: uppercase;
	font-family: "ltc-bodoni-175", serif;
}

h1 a {
	text-decoration: none;
	color: inherit !important;
}

h2 {
	font-style: italic;
	font-weight: normal;
	font-size: 15px;
	line-height: 20px;
    margin: 16px 0 0 4px;
	font-family: "adobe-caslon-pro", serif;
}

h3 {
	font-style: italic;
	font-weight: normal;
	margin: 8px 0 20px;
	
}

p {
	margin: 8px 0 20px;
	font-family: "BlairMdITCTTMedium";
}

span.smallcaps {
	text-transform: uppercase;
	font-size: 10px;
	line-height: 15px;
	font-weight: bold;
	font-style: normal;
}

span.lower {
	top: 2px;
	line-height: 0;
    position: relative;
    vertical-align: baseline;
} 

a {
	text-decoration: underline;
	color: #393836;
}

a:hover {
	text-decoration: none;
}


/* ==============
    Menu
   ============== */

nav {
	margin-top: -15px;
}


nav a {
    text-decoration: none;
    color: #393836;
	font-style: italic;
	margin: 0 0 0 3px;

}

nav a:hover,
nav a:visited {
    text-decoration: underline;
}

nav a:hover, nav a.active {
    text-decoration: underline;
}



/* Contact Form */

#FSContact1 label {
	text-transform: uppercase;
	font-size: 10px;
	line-height: 15px;
	font-weight: bold;
	font-style: normal;
}

#FSContact1 input, #FSContact1 textarea {
	width: 90%;
	font-size: 13px;
	font-family: "adobe-caslon-pro";
	
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 768px) {

/* ====================
    768 / 700 / iPad
   ==================== */

	.wrapper {
        width: 700px; 
        margin: 0 auto;
    }

	.imagecontainer {
		width: 700px;
		height: 467px;
	}
	
	#masonry { width: 720px;}
	#masonry .post { width:220px; }

	#ajax {
		height: 507px;
		width: 700px;
	}

	.category-motion #ajax {
		height: 433px;
	}
	
	.right {
		border: none;
		padding: 0;
	}
	
	#text.clients .left {
		text-align: right;
	}
	
	#text.clients h3, #text.clients p {
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.left, .right {
		display: inline;
		width: 350px;
		float: left;
	}
	


}

@media only screen and (min-width: 940px) {

/* ===============
    940 - 900
   =============== */

    .wrapper {
        width: 900px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

	.header-container .wrapper {
		height: 99px;
	}

    .title {
        float: left;
    }

    nav {
        float: right;
		margin-top: 1px;
		text-align: right;
    }

    #prev, #next , #prevFilm a, #nextFilm a { display: block }

	h1 {
	 	font-size: 40px;
		line-height: 20px;
		margin: 0 0 0 -2px;
	}
	
	p {
		margin: 9px 0 20px;
		
	}
	
	.imagecontainer {
		width: 900px;
		height: 600px;
	}
	
	#masonry { width: 920px;}
	#masonry .post { width:210px; }

	#ajax {
		height: 640px;
		width: 900px;
	}

	.category-motion #ajax {
		height: 546px;
	}

	.left, .right {
		display: inline;
		width: 450px;
		float: left;
	}

}

@media only screen and (min-width: 1440px) {

/* ===============
    1440 - 1200
   =============== */

    .wrapper {
        width: 1140px; 
        margin: 0 auto;
    }

	.header-container .wrapper {
		height: 119px;
	}

	h2 {
		margin: 38px 0 0 4px;	
	}
    
	.imagecontainer {
		width: 1140px;
		height: 760px;
	}

	#masonry { width: 1160px;}
	#masonry .post { width:270px; }


	#ajax {
		height: 800px;
		width: 1140px;
	}

	.category-motion #ajax {
		height: 680px;
	}
	
	.left, .right {
		display: inline;
		width: 570px;
		float: left;
	}


}

@media only screen and (min-width: 2000px) {

/* ===============
    2000 - 1600
   =============== */

    .wrapper {
        width: 1600px; 
        margin: 0 auto;
    }

   
	.imagecontainer {
		width: 1600px;
		height: 1067px;
	}

	#masonry { width: 1620px;}
	#masonry .post { width:304px; }


	#ajax {
		height: 1107px;
		width: 1600px;
	}

	.category-motion #ajax {
		height: 940px;
	}
	
	.left, .right {
		display: inline;
		width: 800px;
		float: left;
	}

}







/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}