/*
Theme Name: Kallkritikbyran
Theme URI: http://www.kallkritikbyran.se
Description: A nice wordpress theme for Kallkritikbyran
Version: 1
Author: Juliette Robert
Author URI: http://julietterobert.com
Tags: custom header, responsive, grid

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

*/

/* typography.css */
html {font-size:100%;height:100%;   margin:0;padding:0;}
body {font-size:100%;background:#fff;font-family:"Open Sans", Verdana, Arial, sans-serif;}
h2 {font-size:1.5em;color: #1b1967;line-height:1em;margin-bottom:0.4em;font-family:"Open Sans", verdana;/*font-variant:small-caps;*/font-weight:600;}
h2 a{ color: #1b1967;}
h2 a:hover { color: #777;}
h3 {font-size:1em;text-align:left;margin:0;font-family:"Open Sans", verdana;font-weight:600;}
h3 a{ color: #1b1967;}
h3 a:hover { color: #777;}
h4 {font-size:1.3em; font-family:"Josefin Sans"; padding-bottom:0.7em;margin-bottom:0.6em;text-transform: uppercase;letter-spacing:3px;border-bottom: 2px solid #a5b7c1;}
h4 a {color:#1b1967;}
h4 a:hover { color: #777;}
h5 {font-family:"Josefin Sans";font-size:1em;font-weight:bold;color:#222;margin-top:5px;text-transform: uppercase;letter-spacing:1px;margin-bottom:1em;}
h5 a:hover { color: #777;}


h6 {font-family:"Josefin Sans";font-size:1em;font-weight:bold;color:#222;margin-top:5px;text-transform: uppercase;letter-spacing:1px;margin-bottom:1em;}
h6 a{ color:#fff;padding:5px 5px 3px 5px; background-color: #d34b1e;}
h6 a:hover { color: #777;}


h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin-bottom: 2em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#999;}
a {color:#1b1967;text-decoration:none}
blockquote {margin:1.5em;font-style:italic;	padding: 0 0 0 0;color: #000;background: url('http://localhost:8888/youpress/wp-content/themes/youpress/img/quote.png') .5em top no-repeat;}
blockquote p { padding: 0 20px 0 30px; font-size:0.9em;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;list-style-type:none;}
ul, ol {margin:0 0em 0em 0;padding-left:0em;list-style-type:none;}
ul {list-style-type:none;}
ol {list-style-type:none;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}
.smalldate 	{font-size: .8em;margin-bottom:0.9em;border-bottom:1px solid #ccc;padding-bottom:5px;}
.smallmeta 	{font-size: .9em;margin-bottom:0.9em;border-bottom:1px solid #ccc;padding-bottom:5px;}
.smallcat {font-size: .9em;margin-bottom:2em;font-family:"Open Sans";padding-bottom:5px;}
.smallcat a {color:#1b1967;}
.smallcat a:hover{color:#777;}
.post-meta { font-family: "Open Sans"; margin-top:25px;}
.post-meta-key { text-transform: uppercase; font-family: "Josefin Sans"; }
.home-cat {color:#1b1967; font-size:1.4em; font-family:"Josefin Sans"; margin-bottom:0.4em;text-transform: uppercase;letter-spacing:-1px}



/*************************** GRID ********************/


/*html {
  box-sizing: border-box;
}*/


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


.row::after {
  content: "";
  clear: both;
}


@media screen and (max-width: 768px) {
	.col-4, .col-6, .col-5, .col-9 {
		width:100%;
	}
}

@media (min-width: 769px) and (max-width: 1024px){

	.col-4, .col-6, .col-5, .col-9 {
		width:100%;
	}
}

/*************************** GENERAL ********************/



.container {

	display: grid;
	grid-template-columns: [content] 2fr [sidebar] 1fr;
	max-width: 1366px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
	margin-top: 13vh;
}

@media screen and (max-width: 1440px) {
	.container {
	margin-top:18vh;
	}
}

.container-single {

	display: grid;
	grid-template-columns: [content] 2fr [sidebar] 1fr;
	max-width: 1366px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
	margin-top: 13vh;
}

.container-cat, .container-tag {

	display:grid;
	max-width: 1366px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
	margin-top: 13vh;
}

@media screen and (max-width: 1440px) {
	.container-single, .container-cat, .container-tag {
	margin-top:18vh;
	}
}

@media screen and (max-width: 768px) {
	.container-single {
	display:block;
	}

}

.content {
    grid-column: content;
}



.container .row  { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;

}

.container-cat .row, .container-tag .row  { 
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;

}


.container-single .row { 
	padding-left: 20px;
    padding-right: 20px;
    margin-left:4rem;

}

@media screen and (max-width: 768px) {
	.container-single .row {
		margin-left:0rem;
	}

}



.container .smallrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top:8vh;
    padding-left: 20px;
    padding-right: 20px;

}


.container-header { 
	background-color: #fff;
    text-align: left;
    display:flex;
}



.container-sidebar .row, .container-actu .row  { 
	background-color: #a8cadb;
}

.container-sidebar .row {padding-bottom:30px;
}




.right { float: right; }
.left { float: left; }
.clear {clear:both;}

.entry-single {
	/*float:left;*/
	height:auto;
	color: #000;
	text-align: left;
	font-size:1.1em;

}

.entry-single figcaption{
	/*float:left;*/
	height:auto;
	color: #000;
	text-align: left;
	font-size:0.7em;
	font-style:italic;

}

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



.entry-small {

	display:flex;
	justify-content: flex-start;
	padding-right:0.2em;
	padding-bottom:1em;
	margin-right:2em;
	margin-bottom: 2em;
	border-bottom: 1px solid #777;


}

.entry-small img { 
	width:auto;
}




@media screen and (max-width: 768px) {
	.entry-small h5{ 
	margin-left:1.2em;
	}
	.entry-small h3{ 
	margin-left:1.2em;
	font-size:0.9em;
	}
}


.entry-single p{
	margin-bottom:1.4em;
}
	
.entry {
	height:auto;
	margin-bottom:10px;
	margin-right: 20px;
	color: #000;
	font-size:0.9em;

}

.entry-cat {
	height:auto;
	margin-bottom:10px;
	margin-right: 20px;
	color: #000;
	font-size:0.9em;

}

.entry-cat h5{
	font-size:1.2em;
	margin-top:1rem;
	letter-spacing:1px;

}

.entry-tag {
	height:auto;
	margin-bottom:10px;
	margin-right: 20px;
	color: #000;
	font-size:0.9em;

}

.entry-tag h5 a{
	font-size:1em;
	background-color: #e1e1e1;
	padding:0px 5px 2px 5px;

}

.entry-tag img, .entry-cat img{
	width:100%;
	height:auto;
}

.entry-tag h5 {
	margin-top:1rem;
	letter-spacing:1px;
	font-family:"Open Sans", verdana;
	font-variant:normal;
	line-height:1em;
}


.entry-contact {
	height:auto;
	margin-top:4rem;
	margin-bottom:10px;
	margin-right: 20px;
	color: #000;
	font-size:1em;
	border:2px solid #a5b7c1;
	padding:0.7em;
	background-color: #eee;

}

.entry-conf, .entry-edu {
	height:auto;
	margin-top:2rem;
	margin-bottom:10px;
	margin-right: 20px;
	color: #000;
	font-size:1em;
	border:2px solid #a5b7c1;
	padding:0.7em;
	background-color: #eee;

}


.entry-conf h4, .entry-contact h4, .entry-edu h4{
	border:none;
	margin-top:0;
	font-size:1.2em;
}


.entry-edu h3{
	border:none;
	margin-top:0;
	font-size:1em;
}


.category-idedebatt h5 a{ color:#fff;padding:5px 5px 3px 5px; background-color: #40686a;}
.category-idedebatt h5 a:hover { background-color: #777;}

.category-granskning h5 a{ color:#fff;padding:5px 5px 3px 5px; background-color: #f7951e;}
.category-granskning h5 a:hover { background-color: #777;}

.category-guider h5 a{ color:#fff;padding:5px 5px 3px 5px; background-color: #60abd4;}
.category-guider h5 a:hover { background-color: #777;}

.category-nyheter h5 a{ color:#fff;padding:5px 5px 3px 5px; background-color: #111111;}
.category-nyheter h5 a:hover { background-color: #777;}


.post {display:block;clear:both;}


a.wpsnipp{
	background-color:#e1e1e1;
	padding-left: 3px;
	padding-right:3px;
	padding-bottom: 2px;
}

a:hover.wpsnipp{
	background-color:#999;
	color:#fff;

}




/****************************** IMAGES ************************/

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; padding:0 0 0.3em 0.8em}
.alignleft {float:left; padding:0 0.8em 0.3em 0}
.aligncenter {display: block; margin-left: auto; margin-right: auto}

img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }


.wp-caption p.wp-caption-text {
    font-size: 11px;
    font-style: italic;
    line-height: 12px;
    padding: 2px 0px 5px;
    margin: 0px;
}

figure {
	margin-left:0;
	margin-right:0;
}


/*************************** HEADER ********************/

#header { 
	width:100%;
    position:fixed;
    top:0px;
    background-color: #fff;
    z-index: 1;
  	height:10vh;
}

.wrapper-header {
	display: grid;
	grid-template-columns: [social] 1fr [logo] 1fr [menu] 2fr;
}

@media screen and (max-width: 768px) {
	.wrapper-header {
	display:grid;
	grid-template-columns: [logo] 1fr [menu] 2fr;
	}
}

#logos {display:flex;justify-content: flex-start;align-items: center;}
#logos img {height:30px;width:30px;margin-left:0.8rem;margin-bottom:1rem;}

#header h1 {font-weight:400;color:#333;font-family:"Open Sans",Helvetica;font-size:6em;letter-spacing:-4px;line-height:0.3em;margin-bottom:0.5em;padding-left:20px;}
#header h1 a {color:#333;}
#header h1 a:hover {color:#777;}

/*#header h6 {font-weight:normal;color:#333;font-family:"Open Sans", serif;font-size:1.3em;line-height:2em;margin-bottom:0.5em;padding-top:4.2em;}*/

.site-logo {
  z-index: 999;
  height: auto;


}

@media screen and (max-width: 768px) {
	#logos { display:none;
	}
	#header { 
	width:100%;
    position:fixed;
    top:0px;
    background-color: #fff;
    z-index: 1;
  	height:13vh;
	}

}

@media (max-width: 1440px) {

	#header { 
	width:100%;
    position:fixed;
    top:0px;
    background-color: #fff;
    z-index: 1;
  	height:15vh;
	}
}

.site-logo img{
	margin-top:0.7em;
}

.logo-img { display: none; }

@media (min-width: 1025px){
    .logo-img-desktop { display: block; }
}

@media (min-width: 769px) and (max-width: 1024px){
    .logo-img-tablet { display: block; }
}

@media (min-width: 320px) and (max-width: 768px){
    .logo-img-mobile { 
    	display: block; 
    	margin-left:2rem;
    	}
}


/*************************** FOOTER ********************/

#footer { 
	max-width: 1366px;
	margin-right: auto;
	margin-left: auto;
	/*display:flex;*/
	display: grid;
	grid-template-columns: [contact] 1fr [copyright] 1fr [search] 1fr;
	justify-content: center;
	font-size:0.8em;
	line-height: 2em;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #222;
	width:100%;
}

@media ( max-width: 768px) {
	#footer {
		display: grid;
		grid-template-columns: [contact] 1fr [copyright] 1fr;

	}
}

.container-footer{
	margin-top:10vh;
	border-top:1px solid #eee;
}


.contact {
	margin-left:20px;

}

.search {
	margin-right:20px;

}


#footer a {
	color: #222;
	border-bottom:1px dotted #666;
}

#footer a:hover {
	color: #777;
	border-bottom:1px dotted #777;
}

.copyright h4 {
	color:#fff;
}



#searchsubmit {
	background-color: #111;
	color:#ccc ;
	border:solid 1px #666;
}	

@media ( max-width: 768px) {
	.search {
		margin-left:20px;
		width:100%;
	}

	.copyright a{
		margin-left:2rem;
	}
	.copyright{
		margin-right:20px;
	}
}

/*************************** NAVIGATION ********************/

/** === Main menu === */
.main-navigation {


  /* Un-style buttons */
  /*
	 * Sub-menu styles
	 *
	 * :focus-within needs its own selector so other similar
	 * selectors don’t get ignored if a browser doesn’t recognize it
	 */
  /**
	 * Fade-in animation for top-level submenus
	 */
  /**
	 * Off-canvas touch device styles
	 */
}



.main-menu ul{
	margin-top:0.7em;

}

.main-navigation .main-menu {
	padding:0;
	margin:1rem;
	text-align:right;

}

body.page .main-navigation {
  /*display: block;*/
}

.main-navigation > div {
  display: inline;
}



.main-navigation .main-menu > li {
  color: #0073aa;
  display: inline;
  position: relative;
  font-family:Josefin Sans;font-size:1.1em; text-transform: uppercase;letter-spacing:1px;
}

.main-navigation .main-menu > li > a {
  font-weight: 400;
  color: #0073aa;
  margin-right: 0.5rem;
}

.main-navigation .main-menu > li > a + svg {
  margin-right: 0.5rem;
}

.main-navigation .main-menu > li > a:hover,
.main-navigation .main-menu > li > a:hover + svg {
  color: #005177;
}

.toggle-nav {
    display: none;
}

@media ( max-width: 768px) {
  	.toggle-nav {

    display: inline-block !important;
    color: #8D7F68;
    font-size:2.5em;
    transition: color linear 0.15s;
    float:right;
    margin-right:2rem;
	}

	.toggle-nav:hover, .toggle-nav.active {
    text-decoration: none;
    color: #8D7F68;
	} 


	.main-navigation {
    display: inline-block;
    position: relative;
    background: #fff;
	}

	.main-navigation .main-menu {
	padding:2rem 3rem 2rem 3rem;
	margin:1rem;
	text-align:right;
	line-height: 2.5em;
	}

	.main-navigation ul {
    display: none;
	position: absolute;
    top: 50%;
    right:1rem;
    padding-left: 15px;
    background: #fff;
	}

	.main-navigation li {
    display: block;
    float: none;
	}

	.main-navigation .main-menu > li {
  	color: #0073aa;
  	display: block;
  	position: relative;
  	font-family:Josefin Sans;font-size:1.1em; text-transform: uppercase;letter-spacing:1px;
	}

}


@media ( min-width: 769px) and ( max-width: 1440px) {
	.main-navigation .main-menu > li {
  color: #0073aa;
  display: inline;
  position: relative;
  font-family:Josefin Sans;font-size:1em; text-transform: uppercase;letter-spacing:1px;
	}

}


/************************** Sidebar **********************************/



form.wpcf7-form p{margin-bottom:0.7em;margin-top:0.7em;}

label{
	font-size: 0.9em;
}

input{
	max-width: 100%;
	height: 2em;
}

textarea{
	max-width: 100%;
}

@media screen and (max-width: 600px) {
	input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


@media screen and (max-width: 768px) {
	.container-sidebar {
		display:none;
		overflow-x: hidden;
	}
}