/* ######################################################
#### VARIABLES - USE these for easier future changes
####################################################### */
@import '_default-variables.scss';
@import '_dynamic-variables.scss';
@import '_mixins.scss';


 /* #####################################################
 #### ALL DEFAULT VARIABLES IN scss-imports/_default-variables.scss
 #### MIXINS IN scss-imports/_mixins.scss
 ######################################################## */
 
 /* Some variables that depend on variables from default or dynamic stylesheets */
   $theme-color-dark:	 darken($theme-color, 20%); /* Theme color dark (darkens theme color all by itself, or you can replace with a value) */
 	$theme-color-complement: lighten($theme-color, 20%); /* Complementary theme color */
	$phone-menu: setContrastColor($theme-color, #fff); /* Phone menu button */

/*
###############################################################################################################
########## THE FULL CODE
###############################################################################################################
*/
body {
 overflow-y: scroll;
 background: $background;
 max-width: 100%;
 word-wrap: break-word;
 color: $text-color-dark;
 font-family: $cfont;
 font-size: $fsize;
 line-height: $flheight;
 
 a {
 	 color: $link-color; /* Link color */
 	 text-decoration: none;
 }
  a:hover{
 	 @if(lightness($theme-color) > 70) {
 	 	 	color: darken($theme-color, 30%);
		 }
	@else {
			color: lighten($theme-color, 10%);
		}
	 text-decoration: underline;
	 
 
 }
}
/* H1 is super, all other headings extend h1 */
 h1 {
 	 font-weight: $tweight;
 	 font-size: $tfsize;
 	 line-height: $tlheight;
	 font-family: $tfont;
 	 color: $title-color;
 	 	 
 	 a{
 	 	 color: $title-color;
 	 }
 	  a:hover{
		 @if(lightness($theme-color) > 70) {
 	 	 	color: darken($theme-color, 30%);
		 }
		 @else {
			 color: lighten($theme-color, 10%);
		}
 	 	 text-decoration: none;
 	 }
 }
 
 
 @for $i from 2 through 4 {
 	 h#{$i} {
 	 	 @extend h1;
 	 	 $tfsize: $tfsize * 0.85;
 	 	 font-size: $tfsize;
 	 	  
 	 }
 	 
 }
 @for $i from 5 through 6 {
 	 h#{$i} {
 	 	 @extend h4;
 	 	 $tfsize: $tfsize * 0.9;
 	 	 font-size: $tfsize;
 	 }
 }
 
/* ############################
#### Helpers
############################## */
 
/* Margin bottom for quite a few elements */
 p, ul, ol,
 h1, h2, h3,
 h4, h5, h6,
 table, figure,
 form, fieldset,
 blockquote, article,
 adress, .widget, .sircon-byline,
 .sircon-simple-slideshow{
 	 margin:0 0 $cmargin;
 }
 
 /* Make an element be non-visible without actually being set as invisible */
 .push-away{
 	 position:absolute;
 	 top:100%;
 	 height:0;
 	 overflow:hidden;
 }
 
/* Clearfix! Fixes inner-floating-missing-height problem */
 .max, .read-max, .columns,
 .clear{
 	 clear:both;
 	 
 	 &:before {
 	 	 @include clearBeforeAfter(); /* Clears them all */
 	 }
 	 &:after {
 	 	 @include clearBeforeAfter(); /* Clears them all */
 	 }
 }
 
 
/* Generic Screenreader visibility */
 .screen-reader-response, /* Contact form 7 uses this selector */
 .screen-reader-text,
 .screenreader-only{
 	 position:absolute;
 	 top:0;
 	 left:0;
 	 opacity:0;
 	 z-index:-99999;
 	 pointer-events:none;
 }
 
/* Some text content not to be displayed */
 .ir{
 	 overflow:hidden;
 	 
 	 &:before {
 	 	 content:" ";
 	 	 display:block;
 	 	 height:150%;
 	 }
 }
 
/* Layout never wider than this */
 .max {
 	 max-width: $max;
 	 position: relative;
 	 margin: auto;
 	 padding: 0px 10px;
	 
 }
/* And max height for a few elements... */
 #top >.max,
 #bottom >.max{height:100%;}
 
/* Prepared in case of fantastic background */
 .ajax-loading #sirconajax-background-image .featured-image{opacity:0.6}
 
/* ######################################
##### Preset padding classes
- may help provide equal amount of space all over the website, if used.
######################################### */
 
 .pad{padding:$cpadding;}
 .pad-top{padding-top:$cpadding;}
 .pad-bottom{padding-bottom:$cpadding;}
 .pad-left{padding-left:$cpadding;}
 .pad-right{padding-right:$cpadding;}
 .pad-vertical{
 	 padding-top:$cpadding;
 	 padding-bottom:$cpadding;
 }
 .pad-horisontal{
 	 padding-left:$cpadding;
 	 padding-right:$cpadding;
 }
 
 
/* ##############################
###### READ MAX - Readable text content
################################*/
 .read-max {
 	 > * {
 	 	 max-width: $read-max; /* Limited by the read-max value */
 	 }
 	 .ovverride-read-max, figure { /* Figures and some other elements can become fullwidth */
 	 	 max-width: 100%;
 	 }
 	 > pre {
 	 	 overflow: auto;
 	 	 display: block;
 	 	 background:#FFF;
 	 	 color:#000;
 	 	 padding:10px;
 	 	 border:1px solid #bbb;
 	 	 font:14px/1.6 lucida console, sans-serif;
 	 }
 }
 
/* ##############################
###### GENERAL
################################*/
 
/* Makes mobile-only elements display,
desktop-only elements won't */
 .desktop-only{display:none;}
 .mobile-only{display:block;}
 
 
 @media(max-width: $tablet){ /* A good media width is perhaps the same breakpoint as sidebars */
 	 .override-max{
 	 	 position:relative;
 	 	 display:block;
 	 	 left: (-1/2) * $cpadding; /* match padding one side of .max */
 	 	 width:calc(100% + $cpadding); /* 100% plus padding of both sides of .max */
 	 }
 }
 
 
/* ######################################
###### Z-index of major elements
######################################### */
 #top{z-index:10}
 #middle{z-index:3}
 #bottom{z-index:5}
 #sirconajax-background-image{z-index:1;}
 
 
/* ###################################
###### TOP SEARCH
###################################### */
#top-search {
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 0 $cpadding*0.5;
	text-align: right;
	
	@if($title-align == right) {
		right: auto;
		left: 0;
		text-align: left;
	}
	@media(max-width: $tablet) {
		position: relative;
		text-align: left;
	}
		
}
 
 
/* ######################################
###### TOP
######################################### */
#top{
 height: auto;
 margin-bottom: 0;
 position: relative;
}
.has-sidebar-showcase #top{margin-bottom:0;}
 
 
/***** LOGO *****/
 #main-logo{
 	 position:absolute;
 	 bottom:18px;
 	 left:5px;
 	 
 	 .logo.mobile-only{
 	 	 width:70px;
 	 	 height:70px;
 	 	 background:url(logo-mobile.png) 50% no-repeat;
 	 }
 	 .logo.desktop-only{
 	 	 width:354px;
 	 	 height:70px;
 	 	 background:url(logo.png) 50% no-repeat;
 	 }
 }
/************ Logo in top ********************/	 
 
.logo-container {
 text-align: center;
 @if(($title-align == left) or ($title-align == right)) {
	 display: inline-block;
	 vertical-align: middle;
	 padding: 0px $cmargin 0 $cmargin;
 }

}
 
 
 
 
/******* BLOGINFO, title and description **********/
 #bloginfo {
 	 text-align: $title-align;
 	 padding-top: $cpadding * 2;
 	 margin: auto;
	 $icolor: $text-color-dark;
	 
	 @if(($menu-position == fixed)) {
		 padding-top: $cpadding * 3;
			 
	 }
	 h1 {
		 margin-bottom: 10px;
	 }
	 
	 p, h1, h1 a {
		 @if(lightness($background) < 60) {
		 	color: setContrastColor($background, $icolor);
		 }
	 }
	 &:after {
		 @include clearBeforeAfter();
	 }
	 @if(($title-align == left) or ($title-align == right)) {
		 .blogtitle {
			
			 display: inline-block;
			 vertical-align: middle;
		 }
	 }
 }
 .blogtitle {
	 
 }
 
 .bloginfo-setting-title {
 	 .blogdescription {
 	 	 display: none;
 	 }
	 .blogtitle {
		 
		 margin-bottom: $cmargin * 0.5;
		 
	 }
 }
 .bloginfo-setting-none {
	 #bloginfo {
		 .blogdescription, .blogtitle {
			 display: none;
		 }
	 }
 	 
 }
 .header-style-default.bloginfo-setting-none {
 	 #top {
 	 	 padding-top: $cpadding;
 	 	 background: transparent;
 	 }
 }
 
 
/***** TOP HEADER *********/
 
 
 .header-container {
 	 margin: auto;
	 text-align: center;
	 img {
	 	margin-bottom: $air;
 	}
 }
 .no-header {
	 height: $air;
 }

 .header-style-default {
 	 .header-container, #sidebar-showcase {
 	 	 max-width: $max - $cpadding;
		 margin: auto;
 	 }
 	 #main-menu {
 	 	 max-width: $max - $cpadding; /* Only $max when header is also $max */
		 @if(($menu-position == fixed)) {
			 max-width: 100%;
		 }
 	 }
 	 #bloginfo {
 	 	 max-width: $max - $cpadding; /* Only $max when header is also $max */
 	 }
 }
 .header-style-fullwidth.bloginfo-setting-none {
	 #bloginfo {
		 padding: 0;
	 }
 }
	  
/***** header-1 sidebar "Header extras" *****/
 #sirconajax-header-1{
 	 position:absolute;
 	 top:0;
 	 right:0;
 	 
 	 .widget-title{
 	 	 display:none;
 	 	 margin:0;
 	 }
 }
 
/***** MENU *****/

 .admin-bar #main-menu {
	 @if($menu-position == fixed) {
	 	top: 32px;
	 }
 }
 #main-menu{
	 position: $menu-position;
	 top: 0;
	 width: 100%;
 	 background: $theme-color;
 	 margin: auto;
 	 padding: 0;
	 text-align: $menu-align;
	 
	 @if($background == $theme-color) {
 	 	border-bottom: 1px solid $light-grey;
		border-top: 1px solid $light-grey;
	 }
 	 /* <li> */
 	 #main-menu-items > .menu-item {
 	 	 margin:0;
 	 }
 	 #main-menu-items {
 	 	 max-width: $max - $cpadding;
 	 	 margin: auto;
 	 	 
 	 	 /* <a> */
 	 	 .menu-clickable{
			 font-size: $fsize;
 	 	 	 transition:0.2s;
 	 	 	 padding:8px 20px;
 	 	 	 color: setContrastColor($theme-color, $link-color);
 	 	 }
 	 }
 	 
 	 /* Current <li> */
 	 .current-menu-item{}
 
 	 /* Current <a> */
 	 .menu-clickable:hover,
 	 .current-menu-item > .menu-clickable{
		 background: $theme-color-dark;
		 color: setContrastColor($theme-color-dark, $link-color);
 	 }
 
 	 /* Top level spesifics */
 	 > .menu-item > .menu-clickable{}
 
 	 /* Current <li> */
 	 > #main-menu-items > .current-menu-item{
 	 	 /* Current <a> */
 	 	 > .menu-clickable{}
 	 }
 	 	 /* all submenu <ul> */
 	 .submenu {
 	 	 min-width:180px;
 	 	 top:calc(100% + 0px);
		 
		 
		 @if ($menu-align == left) {
			 left: 0;
		 }
		 background: $contentbg;
 
 	 	 /* all submenu <li> */
 	 	 > .menu-item{
 	 	 	 padding: 0px;
 	 	 	 }
 
 	 	 /* all submenu <a> */
 	 	 > .menu-item .menu-clickable{
 	 	 	 box-shadow:none;
 	 	 	 color: $link-color !important;
 	 	 }
 
 	 	 /* Current submenu <li> */
 	 	 .menu-clickable:hover,
 	 	.current-menu-item > .menu-clickable{
			 background: $theme-color-dark;
			 color: setContrastColor($theme-color-dark, $link-color) !important;
 		 }
 	 	
 	 }	 	 
 }
 
/* Phone menu! */
 #phone-menu{
 	 bottom: 10px;
	 top: auto;
	 @if($menu-position == fixed) {
		 top: 50px;
		 bottom: auto;
		 position: $menu-position;
	 }
 	 
 	 .top-lvl {
 	 	 background: $contentbg;
 	 }
 	 .trigger-phonemenu{
 	 	 width: 100%;
 	 }
 	 	 	 
 }
 #phone-menu .menu-clickable:focus,
 #phone-menu .menu-clickable:active{
 	 	 background-color:$theme-color-complement;
 	 	 color:#FFF
 	 	 }
 #phone-menu .menu-clickable {
 	 	 text-align:left;
 	 	 font-size: $fsize;
 	 	 border:none;
 	 	 border-bottom:1px solid #ccc;
 	 	 text-align:center;
 	 	 padding: 10px 15px;
 	 }
 .bloginfo-setting-none #phone-menu {
	 top: $cpadding;
 }
 
 	 /*
 Submenu toggler indicator
 */
 nav .submenu-toggler:after,
 .nav .submenu-toggler:after{
 	 display: none;
 	 content: " ";
 	 border-left: 5px solid #000;
 	 border-top: 5px solid rgba(0, 0, 0, 0);
 	 border-bottom: 5px solid rgba(0, 0, 0, 0);
 	 position: absolute;
 	 top: calc(50% - 5px);
 	 right: 10px;
 }
 /*
 Submenu toggler indicator, down */
 #main-menu-items > .menu-item > .submenu-toggler:after{
 	 border-top: 5px solid #000;
 	 border-left: 5px solid rgba(0, 0, 0, 0);
 	 border-right: 5px solid rgba(0, 0, 0, 0);
 	 border-bottom:none;
 	 top:calc(100% + 5px);
 	 right:calc(50% - 5px);
 }
 /* Phone menu button */
 #phone-menu > button{display:none;}
 #phone-menu .trigger-phonemenu{
 	 display:block;
 	 font-size:0;
 	 height:100%;
 	 width:100%;
 	 background: $theme-color;
	 border: 1px solid lighten($phone-menu, 50%);
	 @include border-radius(5px);
 	 position:relative;
 }
 

 #phone-menu .trigger-phonemenu:after,
 #phone-menu .trigger-phonemenu:before{
 	 display:block;
 	 content:"";
 	 position:absolute;
 	 top:26%;
 	 left:10%;
 	 width:80%;
 	 height:5px;
 	 
 	 background:transparent;
 	 box-shadow:0 10px 0 $phone-menu, 0 20px 0 $phone-menu;
 }
 #phone-menu .trigger-phonemenu:after{
 	 top:calc(26% - 10px);
 	 box-shadow:0 10px 0 $phone-menu;
 }
 /* Active link in phone menu */
 #phone-menu .menu-clickable:active{background-color:$444; color:#FFF}
 .nav-child{
 	 @extend .top-lvl;
 }
 
/* ####################################
###### SLIDESHOW BASICS
#######################################*/
 
.sircon-simple-slideshow {
margin: auto;
max-width: auto;

 
 
 .slide {
	 max-height: $slider-height;
 	 figure {
 	 	 min-height: $slider-height;
		 @media(max-width: $tablet) {
			 $slider-height: 220px;
			 min-height: $slider-height;
		 }
 	 	 /* Control size here! padding-bottom 50% means 2:1 images*/
 	 	 padding-bottom:30%;
 	 	 background-size: cover;
 	 }
 	 .slide-button {
 	 	 background: $theme-color-complement;
 	 	 border: 2px solid #fff;
 	 	 
 	 }
 }
}
 @media(max-width:$tablet){
 .sircon-simple-slideshow .slideshow-nav{opacity:0;}
 	 .sircon-simple-slideshow .slideshow-nav .nav{
 	 	 height:200px;
 	 	 top:-100px;
 	 }
 }
/* ######################################
###### MIDDLE
######################################### */
 #middle{
 	 transition:opacity 1s;
 	 opacity:1;
	 
 }
 .ajax-loading > #middle{
 	 opacity:0.6; /* Fade old content from existence (but not completely, allow readability until new content arrives) */
 }
 
/* ##############################
### CONTENT RELATED (MAIN PART)
################################# */
 #sirconajax-main-content {
 	 margin-top: $cmargin;
 }
 

/* Center content - the content container */
 #center-content {
 	 background: $contentbg;
	 @if($background == $contentbg) {
		 padding: 0 0 $cpadding 0;
	 }
	 @else {
		 padding: $cpadding;
	 }
	 
	 @media(max-width: $phone) {
		 padding: $cpadding * 1.5;
	 }
 
 	 
 	 max-width: $max - $cpadding;
	 max-width: $content-width;
	 margin: auto; 
 }
 
/* Display of things in posts and pages */
 
 /* Caption on images */
 figcaption{
 	 	 padding:5px 15px;
 	 	 font-size:$fsize * 0.8;
		 overflow-y:auto;
		 max-height: 1.7 * $fsize * 2;
 	 	 font-style:italic;
 	 	 background:rgba(0, 0, 0, 0.6);
 	 	 color:#FFF;
 	 	 position:absolute;
 	 	 left:0;
 	 	 right:0;
 	 	 bottom:0;
 	 }
 	 
 /* Blockquotes */	 
 blockquote {
 	 border-top:1px solid #ccc;
 	 padding: $cpadding;
	 margin: $cmargin*1.5 0;
 	 font-size: $fsize * 1.3;
	 line-height: 1.5;
 	 font-style:italic;
 	 text-align:center !important;
 	 border-bottom:1px solid #ccc;
 	 
 	 p {
 	 	 margin: 0;
 	 }
 }
 
 /* Lists in content */
.read-max { 
	 ul, ol {
		 li {
			 line-height: 1.4;
			 margin: $cmargin*0.5 0;
		 }
	 }
}
/* ######################################
###### CONTENT RESPONSIVE IMAGES
######################################### */
 
 /* Floatinging responsively */
 	 .min-width-480 {
 	 	 .alignleft, .alignright {
 	 	 	 max-width:49%;
 	 	 }
 	 	 .alignleft {
 	 	 	 margin-right: $cmargin;
 	 	 }
 	 	 .align-right {
 	 	 	 margin-left: $cmargin;
 	 	 }
 	 	 .alignnone {}
 	 	 .aligncenter{}
 	 }
 	 
/* ######################################
###### DEFAULT ARTICLE, BYLINE, READMORE, INGRESS
######################################### */
 .sircon-byline{
 	 padding:$cpadding*0.2 0;
 	 border-top:1px solid $light-grey;
 	 border-bottom:1px solid $light-grey;
 	 font-size: $fsize * 0.9;

 	 color: lighten($text-color-dark, 20%);
 	 
 	 a {
 	 	 color: lighten($text-color-dark, 30%);;
 	 }
 }
 
 .icon-obj {
	background-repeat: no-repeat;
	background-position: top center; 
	background-size: 100%;
	content: ' ';
	margin-right: 8px;
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.8;
 }
	
 .sircon-meta {
	 border-top: 1px solid $light-grey;
	 border-bottom: 1px solid $light-grey;
	 margin: $cmargin 0;
	 list-style: none;
	 font-size: $fsize * 0.9;

	 li {
		 display: inline-block;
		 margin: $cmargin * 0.35 $cmargin * 1.5 $cmargin * 0.35 0;
		 
		
		 &.meta-author {
			
			&:before {
				background-image: url('icons/author.png');
				@extend .icon-obj;
			}
		 }
		 &.meta-cmt {
			
			&:before {
				background-image: url('icons/comments.png');
				@extend .icon-obj;
			}
		 }
		 &.meta-date {
			
			&:before {
				background-image: url('icons/calendar.png');
				@extend .icon-obj;
			}
		 }
		 
		 &.meta-cat {
			
			&:before {
				background-image: url('icons/category.png');
				@extend .icon-obj;
			}
		 }
		 &.meta-edit {
			
			&:before {
				background-image: url('icons/edit.png');
				@extend .icon-obj;
			}
		 }
		 
		 &.meta-tag {
			 background: lighten($light-grey, 10%);
			 font-size: $fsize*0.8;
			 padding: $cpadding*0.5;
			 display: block;
			 margin-right: 0;
			
			&:before {
				background-image: url('icons/tag.png');
				@extend .icon-obj;
			}
		 }
	 }
 }
 .sircon-readmore{
 	 display:inline-block;
 	 text-decoration:none;
 	 font-size: $fsize * 0.85;
 	 float:right;
 	 background: $light-grey;
 	 padding: $btnpadding;
	 color: setContrastColor($light-grey, $link-color);
	 
	 
 }
 .sircon-readmore:hover{

 	 background: $theme-color;
 	 @if(lightness($theme-color) > 60) {
 	 	 	color: darken($theme-color, 40%);
	}
	@else {
		 color: lighten($theme-color, 40%);
	}
 	 text-decoration:none;
 }
 
 .sircontheme-ingress {
 	 line-height: $flheight;
 	 font-size: $fsize;
	 font-family: $cfont;
 	 font-weight: bold;
	 color: $text-color-dark;
 }
 
 .social-container {
	 text-align: left;
	 padding-bottom: $cpadding;
	 
	 .fb-like, .twitter-share-button {
		 display: inline-block;
		 vertical-align: middle;
		 margin-right: 10px;
	 }
 }

/* ######################################
###### FRONTPAGE
######################################### */
 /* .home > #middle{} /**/
 
 /* Loop articles*/
 .min-width-640 .loop-content > article{
 	 @include displayNews(2, $cmargin, yes);
 }
 
/* ######################################
###### COMMENT STYLES
########################################*/
/* This should be cleaned, too heavy nesting */
 
 .comments-wrapper {
 	 padding: $cpadding 0;
 	 
 	 .comment-list {
 	 	 padding: $cpadding 0;
 	 	 
 	 	 .depth-1 {
 	 	 	 margin: $cmargin 0;
 	 	 }
 	 
 	 	 .comment {
 	 	 	 
 	 	 	 &:after {
 	 	 	 @include clearBeforeAfter(); /* FLOAT FIX */
 	 	 	 }
 	 	 	 
 	 	 	 .comment-meta, .comment-content {
 	 	 	 	 text-align: center;
 	 	 	 	 @media (min-width: $tablet) {
 	 	 	 	 	 @include twoColumns(30%, 70%, 10px); /* Include columns on tablet and wider */
 	 	 	 	 	 text-align: left;
 	 	 	 	 	 
 	 	 	 	 }
 	 	 	 	 position: relative;
 	 	 	 	 
 	 	 	 	 .edit-link {
 	 	 	 	 	 font-size: 80%;
 	 	 	 	 	 font-style: italic;
 	 	 	 	 	 display: block;
 	 	 	 	 }
 	 	 	 	 a {
 	 	 	 	 	 color: $text-color-dark;
 	 	 	 	 }
 	 	 	 	 
 	 	 	 }
 	 	 
 	 	 	 .comment-content {
 	 	 	 	 background: darken($background, 5%);
 	 	 	 	 padding: $cpadding $cpadding $cpadding;
				 color: setContrastColor($background, $text-color-dark);
 	 	 	 	 @include border-radius($border-radius);
 	 	 	 	 
 	 	 	 	 p:last-child {
 	 	 	 	 	 margin: 0;
 	 	 	 }
			 
			 
				 
 	 	 	 	 
 	 	 	 	 @media (min-width: $tablet) {
 	 	 	 	 	 &:before {
 	 	 	 	 	 	 content: " ";
 	 	 	 	 	 	 position: absolute;
 	 	 	 	 	 	 left: -10px;
 	 	 	 	 	 	 top: 10px;
 	 	 	 	 	 	 border-top: 10px solid transparent;
 	 	 	 	 	 	 border-bottom: 10px solid transparent;
 	 	 	 	 	 	 border-right: 10px solid darken($background, 5%);;
 	 	 	 	 	 }
 	 	 	 	 }
 	 	 	 }
 	 	 	 .reply {
 	 	 	 	 .comment-reply-link {
 	 	 	 	 	 @extend .sircon-readmore;
 	 	 	 	 	 font-size: $fsize * 0.8;
 	 	 	 	 	 background: $contentbg;
					 color: $link-color;
 	 	 	 	 	 border: 1px solid $light-grey;
 	 	 	 	 	 
 	 	 	 	 }
 	 	 	 	 &:after {
 	 	 	 	 	 @include clearBeforeAfter(); /* FLOAT FIX */
 	 	 	 	 }
 	 	 	 }
 	 	 	 .children {
 	 	 	 	 font-size: $fsize * 0.8;
 	 	 	 	 list-style: none;
 	 	 	 	 padding: 0;
 	 	 	 	 margin: 0;
 	 	 	 	 @media (min-width: $tablet) {
 	 	 	 	 	 .depth-2 {
 	 	 	 	 	 	 border-left: 10px solid $light-grey;
 	 	 	 	 	 	 padding-left: $cpadding;
 	 	 	 	 	 }
 	 	 	 	 }
 	 	 	 	 .comment-meta img {display: none;}
 	 	 	 	 .comment-body {
 	 	 	 	 	 margin-bottom: 5px;
 	 	 	 	 	 border-bottom: 1px solid $light-grey;
 	 	 	 	 }
 	 	 	 	 .comment-content {
 	 	 	 	 	 background: transparent;
 	 	 	 	 	 padding: 0;
 	 	 	 	 	 color: $text-color-dark;
 	 	 	 	 	 &:before {display:none;}
 	 	 	 	 }
 	 	 	 	 .comment-reply-link {
 	 	 	 	 	 display: none; /* No reply for children, sorry */
 	 	 	 	 }
 	 	 	 }
 	 	 
 	 	 }
 	 	 
 	 }
 	 .form-submit {
 	 	 .submit {
 	 	 	 @extend .sircon-readmore;
 	 	 	 width: auto;
 	 	 }
 	 	 &:after {
 	 	 	 @include clearBeforeAfter(); /* FLOAT FIX */
 	 	 }
 	 }
 	 
 }
 #form-allowed-tags {
 	 display: none;
 }
 
 
/* ######################################
###### ARCHIVES, PAGINATION
######################################### */
 .search-results figure.featured-image,
 .archive figure.featured-image{
 	 max-height:$picheight;
 	 overflow-y:hidden;
	
 }
 .pagination{
	 padding-top: $cpadding;
 	 text-align:right;
 	 > .page-numbers {
 	 	 margin: 0 2px;
		 padding: 2px 7px;
 	 }
 	 > .current{
		 background: $theme-color;
		 color: setContrastColor($theme-color, #fff);
		 
		 } /* Current pagination item */
 }
 .fullpost-article {
	 margin-bottom: $cmargin * 2;
 }
 .article-meta {	
 	 
 	 .featured-image{
 	 	 max-height: $picheight;
 	 	 overflow:hidden;
 	 	 position: relative;
 
 	 	 left: -$cpadding;
 	 	 width: calc(100% + #{$cpadding * 2});
 	 	 max-width:none;
 	 	 background-size:cover;
 	 	 background-position:50%;
 	 	 
 	 	 >img{opacity:0;}
 	 	 
 	 	 .article-inner{
 	 	 	 background:#fff;
 	 	 	 padding:0 $cpadding $cpadding;
 	 	 	 
 	 	 	 h2{padding-top:$cpadding;}
			 
			 
 	 	 }
 	 }
 }
 
 .article-inner {
	  header {
		text-align: $talign;
	}
 }
 .article-meta {
	 h1, .meta, .byline {
		 text-align: $talign;
	 }
 }
 
/* ######################################
###### SIDEBARS
#######################################*/
#sidebar-left-1, #sidebar-right-1{
  @if($background == $contentbg) {
		 padding: 0;
	 }
	 @else {
		 padding: $cpadding;
	 }
	.widget {
		margin-bottom: $cmargin * 1.5;
	}
 background: $contentbg;
 
 .widget-title { /* Titles in sidebar widget */
 	 $wtbg: $theme-color; /* Set background color here */
 	 $wttc: $text-color-dark; /* Set text color here */
 	 background: $wtbg;
 	 color: setContrastColor($wtbg, $wttc);	 
 	 padding: checkIfBox($wtbg);
 	 margin-bottom: $cmargin * 0.5;
 	 
 	 @if(padding != 0) {
 	 	 font-size: $tfsize;
 	 }
 	 
 }
 ul {
 	 padding: 0;
 
 	 li {
 	 	 padding: 3px 5px 3px ($cpadding * 3 / 4);
 	 	 
 	 }
 }
}
 
 
 
/* ######################################
###### DEFAULT WIDGETS
######################################### */
/* All menu items style */
 
 .widget_nav_menu {
 	 background: transparent;
 	 
 	 .menu-item {
 	 	 > a {
 	 	 
 	 	 }
 	 }
 	 .menu { /* Level 0 */
 	 	 	 > .current-menu-ancestor > a,
 	 	 > .current-menu-item > a{
 	 	 }
 	 }
 	 .sub-menu {
		 background: rgba(255,255,255,0.1); /* Level 1 */
 	 	 	 > .current-menu-ancestor > a,
 	 	 > .current-menu-item > a{
 	 	 }
 	 	 
 	 	 .submenu { /* Level 2 */
 	 	 	 > .current-menu-ancestor > a,
 	 	 	 > .current-menu-item > a{
 	 	 	 }
 	 	 }
 	 }
 	 
 	 /* Has children indicator */
 	 .menu-item-has-children:after{
 	 	 content:"";
 	 	 display:block;
 	 	 position:absolute;
 	 	 left:5px;
 	 	 top:9px;
 	 	 height:10px;
 	 	 width:10px;
 	 	 background:url(nav-sub.png) 50% no-repeat;
 	 	 background-size: 10px;
 	 }	 	 	 
 	 
 	 
 }
 .widget ul {
 	 	 list-style: none;
 	 	 padding: 0;
 	 }
 .widget_pages {
	 .children {
		 background: rgba(255,255,255,0.15); 
		 font-size: $fsize*0.9;
		 margin: $cmargin*0.2 0 $cmargin*0.5 0;
	 }
 }
/* ######################################
###### BOTTOM
######################################### */
 #bottom{
 	 $bottom-bg: $theme-color-dark;
 	 $bottom-txt: $text-color-dark;
 	 background: $bottom-bg;
 	 padding: $cpadding;
 	 text-align: left;
 	 
 	 
 
 	 color: setContrastColor($bottom-bg, $bottom-txt);
 	 
 	 .widget-title {
 	 	 color: setContrastColor($bottom-bg, $title-color);
 	 	 
 	 }
 	 a {
 	 	 color: setContrastColor($bottom-bg, $link-color);
 	 }
 	 	 
 }
 #bottom > .max{height:100%;}
 
 
 /* ## COLOPHON ## */
 #colophon,
 #colophon a{
 	 color: setContrastColor($theme-color-dark, #fff);
 	 font-size: $fsize * 0.85;
 	 }
 #colophon {
 	 width: 100%;
 	 text-align: center;
	 position: relative;
	 bottom: 0;
	 
	 @media(max-width: $phone) {
		 position: relative;
	 }
 }	 
 	 
 /* GMAP SIZE */
 .gmap-wrap{width:100%; height: $footer-height;}
 
 /* COOKIE NOTICE */
 #cookie-notice{
 	 display:none; /* Made visible by javascript if the cookienotice has not yet been accepted */
 	 position: fixed;
 	 bottom: 0; left: 0; right: 0;
 	 background: rgba(59, 60, 67, 0.9);
 	 padding: 50px 20px 80px;
 	 color: #fff;
 	 text-align: center;
 	 
 	 .btn{
 	 	 position:absolute;
 	 	 bottom:-60px;
 	 	 right:0;
 	 	 width:270px;
 	 }
 }
 	 
/* #####################################
#### INPUT, TEXTAREA AND BUTTON STYLES
#######################################*/
 
/* INPUT VS BUTTONS. In some cases, textboxes should be equally as tall as buttons */
 	 input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel],
 	  button, input[type="button"], input[type="reset"], input[type="submit"]{
 		padding: $btnpadding;
 	 	border: 1px solid $border-color;
		background: $light-grey;
		color: setContrastColor($light-grey, $text-color-dark); 
 	 	 
 	 }
 
 /* INPUT STYLING - textboxes */
 	 input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], textarea{
 	 	 color: $text-color-dark;
 	 	 background: $contentbg;
		 border: 1px solid $border-color;
 	 }
 /* Search form spesific */
 .search-form {
	 font-size: $fsize * 0.8;
	 word-wrap: normal;
 	 input[type="search"] {
 	 	 max-width: 70%;
 	 }
 	 input[type="submit"] {
 	 	 max-width: 28%;
 	 }
 }
 	 
 	 	 
/* #####################################
#### LAYOUT BEHAVIOR
#######################################*/
 
@media (min-width: $tablet) {
/* When screen resolution is size $tablet or bigger,
show desktop-only elements and hide mobile-only */
 .desktop-only{display:block;}
 .mobile-only{display:none;}
 
 
 .has-sidebar-left-1, .has-sidebar-right-1 {	 	 
 	 #center-content {
 	 	 width: $content-width / $max * 100%;
		 
 	 	 float: left;	 	 
 	 }
 	 #sidebar-right-1, #sidebar-left-1 {
 	 	 width: ($max - $content-width - $air) / $max *100%;
 	 }
 	 #sidebar-right-1{
 	 	 	 margin-left: $air / $max * 100%;
 	 	 	 float:right;
 	 }
 	 #sidebar-left-1 {
 	 	 	 margin-right: $air / $max * 100%;
 	 	 	 float:left;
 	 }	 
 }
 .has-sidebar-left-1.has-sidebar-right-1 {
 	 
 	 #sidebar-right-1 {
 	 	 float: none;
 	 }
 }
}
 
@media(min-width: $desktop) {
 
 .has-sidebar-left-1.has-sidebar-right-1 {
 	 #center-content {
 	 	 max-width: ($content-width - 2 * $air) / $max * 100%;
 	 	 float: left;
 	 }
 	 #sidebar-right-1, #sidebar-left-1 {
 	 	 width: (($max - $content-width) / $max *100%)/2;
 	 }
 	 #sidebar-right-1 {
 	 	 float: right;
 	 	 margin-left: $air / $max * 100%;
 	 }
 }
 
}
 
 
.fullwidth-min-width-780 {
 #bottom {
 	 height: auto;
 	 position:relative;
 	 bottom:0;
 	 left:0;
 	 right:0;
 	 }
 #middle { padding-bottom: $air }
}
 
/* Widgets as columnized */
 .fullwidth-min-width-780 {
 
 	 .horizontal-widgets.has-2-widgets,
	 .columns-2 {
		 .widget, figure.gallery-item {
			 @include columns(2, $cmargin);
		 }
		 &:after {
			 @include clearBeforeAfter();
		 }
	 }
 	 .horizontal-widgets.has-3-widgets,
	 .columns-3 {
		 .widget, figure.gallery-item {
			 @include columns (3, $cmargin);
		 }
		  &:after {
			 @include clearBeforeAfter();
		 }
	 }
 	 .horizontal-widgets.has-4-widgets,
	 .columns-4 {
		 .widget, figure.gallery-item{
			 @include columns (4, $cmargin);			 
		 }
		 &:after {
			 @include clearBeforeAfter();
		 }
	 }
	 .columns-5 {
		figure.gallery-item{
			 @include columns (5, $cmargin);			 
		 }
		 &:after {
			 @include clearBeforeAfter();
		 }
	 }
	 
	 .columns-6,
	 .columns-7,
	 .columns-8,
	 .columns-9{
		figure.gallery-item{
			 @include columns (6, $cmargin);			 
		 }
		 &:after {
			 @include clearBeforeAfter();
		 }
	 }
 }
 
 /* The gallery */
 .gallery {
	 padding: $cpadding;
	 background: lighten($light-grey, 4%);
	 margin: $cmargin 0;
	 
	 figure.gallery-item {
		  text-align: center;
	 }
 }
 
 
 .sircon-embed{
	position:relative;
	height:0;
	padding-bottom:50%
}
.sircon-embed > *{
	position:absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}