/*
 Theme Name:   Milli – EmilMedia custom
 Theme URI:    http://wp.emilmedia.se/wp/wp-content/themes/milli-child/
 Description:  Milli Child Theme
 Author:       Carl Papworth
 Author URI:   http://paragrafiskform.se
 Template:     milli
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  milli-child
*/

/*
For older themes, and themes that do not use wp_enqueue_style() to enqueue their stylesheet, use the following line where twentyfourteen is the name of the directory where the theme resides:
*/

@import url("../milli/style.css");


/* =Theme customization starts here
-------------------------------------------------------------- */

/* KLB FIXED */

@font-face {
    font-family: 'Halis-light';
    src: url('fonts/halis/halis_gr-light-webfont.eot');
    src: url('fonts/halis/halis_gr-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/halis/halis_gr-light-webfont.woff') format('woff'),
         url('fonts/halis/halis_gr-light-webfont.ttf') format('truetype'),
         url('fonts/halis/halis_gr-light-webfont.svg#halis_grlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Halis-light';
    src: url('fonts/halis/fonts/halis/halis_gr-light-italic-webfont.eot');
    src: url('fonts/halis/halis_gr-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/halis/halis_gr-light-italic-webfont.woff') format('woff'),
         url('fonts/halis/halis_gr-light-italic-webfont.ttf') format('truetype'),
         url('fonts/halis/halis_gr-light-italic-webfont.svg#halis_grlight_italic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Halis-book';
    src: url('fonts/halis/halisgr-book-webfont.eot');
    src: url('fonts/halis/halisgr-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/halis/halisgr-book-webfont.woff') format('woff'),
         url('fonts/halis/halisgr-book-webfont.ttf') format('truetype'),
         url('fonts/halis/halisgr-book-webfont.svg#halis_grlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Halis-book';
    src: url('fonts/halis/fonts/halis/halisgr-book-italic-webfont.eot');
    src: url('fonts/halis/halisgr-book-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/halis/halisgr-book-italic-webfont.woff') format('woff'),
         url('fonts/halis/halisgr-book-italic-webfont.ttf') format('truetype'),
         url('fonts/halis/halis_halisgr-book-italic-webfont.svg#halis_grlight_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'Halis-black';
    src: url('fonts/halis/halisgr-black-webfont.eot');
    src: url('fonts/halis/halisgr-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/halis/halisgr-black-webfont.woff') format('woff'),
         url('fonts/halis/halisgr-black-webfont.ttf') format('truetype'),
         url('fonts/halis/halisgr-black-webfont.svg#halis_grblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Halis-black';
    src: url('fonts/halis/halisgr-blackitalic-webfont.eot');
    src: url('fonts/halis/halisgr-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/halis/halisgr-blackitalic-webfont.woff') format('woff'),
         url('fonts/halis/halisgr-blackitalic-webfont.ttf') format('truetype'),
         url('fonts/halis/halisgr-blackitalic-webfont.svg#halis_grblack_italic') format('svg');
    font-weight: normal;
    font-style: italic;

}

body{
font-family: Halis-light !important;
font-weight: normal;
font-size: 16px;
color: #444444;
line-height: 1.25em;
height: 300px;
}

.wrapper{
position: relative;
width: 100%;
min-height: 100vh;
/* min-height: calc(100vh - 80px); */
margin: 0px 0px 0px 0px !important;
}



h1, h2, h3, h4 {
font-family: Halis-black !important;
font-weight: bolder !important;
letter-spacing: 0.05em !important;
line-height: 1em;
}

h3, h4{
 font-family: Halis-book !important;
}

h1{
font-size: 2.5em !important;
text-transform: uppercase !important;
}

h2{
font-size: 1.75em !important;
text-transform: uppercase !important;
}

h3 {
font-size: 1.25em !important;
}

h4{
font-size: 1em !important;
}

p, a, li{
font-family: Halis-light !important;
font-size: 16px !important;
font-weight: normal;
}

span {
font-family: inherit !important;
font-size: inherit !important;
}

#main-header{
position: fixed;
min-height: 99vh;
margin-top: 0px;
padding-top: 50px;
padding-left: 0px;
padding-right: 0px;
border-right: 1px dashed #d9d9d9;
z-index: 5000;
background: white;
}

#main-header .brand{
position: fixed;
width: inherit;
height: auto;
padding: 0px 30px !important;
}

#main-header .brand img{
margin-top: -20px;
}

#main-header #main-nav{
width: inherit;
position: fixed;
top: 200px;
border-bottom: 1px dashed #d9d9d9;
}

#main-header #main-nav a{
font-family: Halis-black !important;
font-size: 1em !important;
width: 100% !important;
padding: 10px 30px !important;
text-transform: uppercase;
color: #111;
border-bottom: none !important;
letter-spacing: 0.05em;
border-top: 1px dashed #d9d9d9;
border-bottom: 1px dashed #d9d9d9;
}

#main-header #main-nav a:hover{
background: rgba(0,0,0,0.1);
}


#main-nav li.current_page_item a{
color: #fefefe!important;
background: rgba(0,0,0,0.1);
}

#main-header #main-nav li.current_page_item a{
color: #fefefe!important;
background: #444444 !important;
cursor: default;
border: none;
width: 100%;
}


#main-header #search-2{
position: absolute !important;
margin: 0 auto !important;
bottom: 120px !important;
}

.blog article.post, .single article.post, article.page, .search article, .page-template-page_sidebar-php article.page {
border-left: none !important;
}


#main-footer{
position: fixed;
bottom: 0px;
background: #333;
padding-top: 0px;
height: 80px;
width: 100%;
border-top: 0px;
z-index: 6000 !important;
}

#main-footer .one_half{
padding: 10px 40px;
}

#mqtranslate-chooser{
width: auto;
height: auto;
position: absolute;
bottom: 0px;
right: 20px;
}

#mqtranslate-chooser li{
margin: 0px 0px 0px 10px;
}

#mqtranslate-chooser li.active{
opacity: 0.5;
pointer-events: none;
}


#mqtranslate-chooser li a{
color: #999;
}

#mqtranslate-chooser li a:hover{
color: #fff;
}


/* ––––––––––––––––––––––––––––––– content ––––––––––––––––––––––––––––– */

#content {
position: relative;
margin-left: 207px;
padding-bottom: 100px;
padding-top: 30px!important;
}


/* ––––––––––––––––––––––––––––––– about ––––––––––––––––––––––––––––––– */
#topImg{
width: 100%;
max-height: 400px;
margin-bottom: 2%;
top: 0px;
overflow: hidden;
}

#topImg img{
width: 100%;
height: auto;
}

.triCol{
position: relative;
padding: 2% 2% 100px 2%;
width: 24%;
margin-right: 2%;
height: auto;
float: left;
}

#leftCol{
width: 48%;
}

#rightCol{
margin-right: 0px;
}


.triCol img{
margin-bottom: 30px;
}

.triCol h4{
margin-top: 30px;
margin-bottom: 0px;
}
/* ––––––––––––––––––––––––––––––– gallery  ––––––––––––––––––––––––––––––– */
.isotope-wrapper .isotope{
position: relative !important;
    width: 100% !important;
}

.page-template-page_gallery-php #content {
padding-left: 10px !important;
}

/*.gallery-page{
padding: 0px !important;
margin-left: 0.5%;
}*/

.gallery-page div.gallery-image{
    min-width: 19.85% !important;
    width: 19.85% !important;
    float: left;
}

/*.gallery-page div.gallery-image{
	position: relative !important;
	min-width: 19.2% !important;
	width: 19.2% !important;
	height: 0 !important;
	float: left;
	transform: none !important;
	padding-bottom: 19% !important;
    overflow: hidden;
    margin-bottom: 0.75%;
    margin-right: 0.75%;
    text-align: center !important;
    vertical-align: center;
}*/

/*.gallery-page div.gallery-image a{
text-align: center !important;
}*/

/*
.gallery-page div.gallery-image img{
    position: relative !important;
  width: auto !important;
   height: auto !important;
 min-height: 100% !important;
    min-width: 100% !important;
     max-height: 150% !important;
    max-width: 150% !important;
    max-width: none !important;
    display:block !important;
     margin: 0 auto !important;
     text-align: center !important;
     left: auto !important;
     top: auto !important;
}
*/

/*.gallery-page div.gallery-image img{
  position: absolute;
    top: -9999px  !important;
    bottom: -9999px  !important;
    left: -9999px  !important;
    right: -9999px  !important;
    margin: auto !important;
  	 min-height: 100% !important;
    min-width: 100% !important;
     max-width: 200% !important;
     max-height: 150% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    }*/




/* ––––––––––––––––––––––––––––––– blog  ––––––––––––––––––––––––––––––– */


.blog #content {
padding: 0px 20px 130px 20px;
}

.blog #content .post{
width: 300px;
margin: 0px 20px 20px 0px;
float: left;
padding: 0px 0px !important;
background: #eeeeee;
border: none !important;
}

.blog #content .postTitle{
position: relative;
width: 100%;
height: auto;
display: block;
}

.blog #content .post .postTitle h2{
font-size: 1em !important;
}

.postTitle a{
position: relative;
background: #222222;
width: 100%;
height: auto;
margin: -20px 0 0px 0;
color: #fefefe;
display: block;
}

.postTitle a:hover{
background: #ddd !important;
color: #222222 !important;
}

.postTitle a h2{
padding: 10px 30px;
font-family: Halis-light;
line-height: 1.33em;
color: #fefefe;
float: none;
}

.blogDate{
padding: 5px 30px;
color: #fefefe;
background: #888;
}

.post .post-wrap {
width: 100%;
}

.post .blogTopImg{
width: 100%;
margin-top: 0px;
max-height: 200px;
overflow: hidden;
}

.post .blogTopImg img{
width: 100%;
vertical-align: middle !important;
}

.post p{
position: relative;
padding: 10px 30px;
margin-top: 0px;
max-width: 100%;
}

.post .postFooter{
padding: 20px;
}

.post .postFooter a:hover{
color: #999;
}

.pagination{
position: absolute;
bottom: 90px;
padding-left: 20px;
left: 0px;
border: none;
}

.pagination a{
border-left: none;
}
.pagination .active a{
color: #fefefe!important;
background: #444444 !important;
cursor: default;
border: none;
}

/* –––––––––––––––––––––––––––––– Single Blog  ––––––––––––––––––––––––––––––– */

.singleCon{
max-width: 600px;
}

.singleCon .post-wrap{
margin-top: 30px;
background: #eeeeee;
}

.postTitle h2{
position: relative;
background: #222222;
font-size: 1.75em !important;
width: 100%;
height: auto;
padding: 20px 40px;
margin: 0px 0 0px 0;
color: #fefefe;
display: block;
}

/* ––––––––––––––––––––––––––––––– fancy-box  ––––––––––––––––––––––––––––––– */


.viewer img{
padding: 4px 4px 4px 4px;
background: #fefefe;
z-index: 4000;
}
.viewer .current img{
padding: 20px 20px 20px 20px;
}

.viewer span.caption{
font-family: Halis-black !important;
font-weight: 100 !important;
font-size: 1.25em;
padding-top: 0px;
padding-bottom: 0px;
bottom: 110px;
color: #fefefe;
height: 60px !important;
width: 100%;
bottom: 30px;
text-transform: uppercase;
border-bottom: none !important;
letter-spacing: 0.05em;
z-index: 5000;
}

@media only screen and (max-width: 1409px) {
    .gallery-page div.gallery-image{
        width: 23.6% !important;
    }
	/*.gallery-page div.gallery-image{
	width: 23.6% !important;
	padding-bottom: 23.6% !important;
	margin: 0 !important;
	margin-right: 1% !important;
	margin-bottom: 1% !important;

	}*/
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 1024px) {
    .gallery-page div.gallery-image{
        width: 32% !important;
    }
	/*.gallery-page div.gallery-image{
	width: 32% !important;
	padding-bottom: 32% !important;
	}*/
}

@media only screen and (max-width: 959px) {
	#content{
	margin-left: 0px;
	}

	#main-header{
	position: relative !important;
	min-height: 100px !important;
	border-right: none;
	padding-bottom: 50px;
	padding-left: 0px;
	}

	#menu-button{
		width: 100%;
		position: absolute;
		bottom: 0px;
		left: 0px;
	}

	#main-nav{
	position: absolute;
	bottom: 0px;
	left: 0px;
	}

	.triCol{
	width: 100% !important;
	padding-bottom: 30px !important;
	}

	a.brand {
		position: relative !important;
		text-align: center;
		padding-left: 30px;
	}

	a.brand img {
		width: 20% !important;
		margin: 0 auto;
	}

	#main-footer{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	}

	.one_half p{
	 text-align: left !important;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px), screen and (min-device-width: 480px) and (max-device-width: 767px) {
    .gallery-page div.gallery-image{
        width: 48% !important;
    }
	/*.gallery-page div.gallery-image{
	width: 48% !important;
	padding-bottom: 48% !important;
	margin-right: 2% !important;
	margin-bottom: 2% !important;
	}*/

	a.brand img {
		width: 50% !important;
		margin: 0 auto;
	}

	#main-footer *{
	text-align: left !important;
	}

	#main-footer p{
	font-size: 0.75em !important;
	}

	.one_half p{
	 text-align: left !important;
	}

	.qtrans_language_chooser span{
	font-size: 0.75em !important;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px), screen and (max-device-width: 479px) {
    .gallery-page div.gallery-image{
        width: 48% !important;
    }

	/*.gallery-page div.gallery-image{
	width: 48% !important;
	padding-bottom: 48% !important;
	margin-right: 2% !important;
	margin-bottom: 2% !important;
	}*/

	a.brand img {
		width: 100% !important;
		margin: 0 auto;
	}

	.post{
	width: 100%;
	padding: 10px 20px !important;
	}

	.post h2{
	max-width: 100% !important;
	margin: 0px !important;
	}

	.post p{
	max-width: 100% !important;
	margin: 0px !important;
	}

	#main-footer *{
	text-align: left !important;
	}

	#main-footer .clear{
	margin-bottom: 0px !important;
	}

	#main-footer a{
	font-size: 1em !important;
	color: #fefefe !important;
	text-decoration: underline !important;
	}

	#main-footer p{
	font-size: 0.8em !important;
	}

	.one_half{
		margin: 0px !important;
		padding: 8px 10px 4px 10px !important;
	 	float: left !important;
	}

	.one_half p{
	 text-align: left !important;
	 padding: 0px !important;
	 margin-bottom: 2px;
	 line-height: 1.5em !important;
	 }

	.qtrans_language_chooser{
	width: 100% !important;
	position: absolute !important;
	left: 10px;
	bottom: 2px !important;
	}

	.qtrans_language_chooser li{
	text-align: center;
	float: left !important;
	width: 32.8% !important;
	margin: 0px !important;
	padding: 0px !important;
	}

	.qtrans_language_chooser span{
	font-size: 0.75em !important;
	}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.gallery-page div.gallery-image{
	}
}