/*
Theme Name: Västerbro
Author: Mecka Reklambyrå AB
Author URI: http://www.mecka.se/
Description: Theme for Västerbro.
Version: 1.0

*/

/*
Färger
Grey, text: #4d4d4d
Grey, dark dark: #43505b
Grey, light: #959a9e
Sand, light: #f9f5f0
Sand, red: #c59685
*/




/**
****************************************************************************************
 *  Fonts
 ****************************************************************************************
 */
@import url("webfonts.css");

/**
.FuturaStd-Book { 
	font-family: FuturaStd-Book;
	font-weight: normal;
	font-style: normal;
}
.FuturaStd-Medium { 
	font-family: FuturaStd-Medium;
	font-weight: normal;
	font-style: normal;
}
 */


/*
@import 'https://fonts.googleapis.com/css?family=Didact+Gothic';
*/


/**
****************************************************************************************
 *  Reset
 ****************************************************************************************
 */
/**
 * Resetting and rebuilding styles have been helped along thanks to the fine
 * work of Eric Meyer, Nicolas Gallagher, Jonathan Neal, and Blueprint.
 */

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

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	background: #f1f1f1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

fieldset {
	min-width: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

a:focus {
	/*
	outline: 2px solid #c1c1c1;
	outline: 2px solid rgba(51, 51, 51, 0.3);
	*/
	outline: none;
}

a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

/**
****************************************************************************************
 *  Clearing floats
 ****************************************************************************************
 */
.clear:after {
	clear: both;
}
.clear:before,
.clear:after {
	display: table;
	content: "";
}
.clear {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}


/**
****************************************************************************************
 *  Responsive img
 ****************************************************************************************
 */
img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}













/**
****************************************************************************************
 * Basic structure
 ****************************************************************************************
 */
body {
	background-color: #f9f5f0;
}

#page{
	max-width: 1200px;
	margin: 0 auto;
}

#header{
	position: absolute;
	top: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 100%;
	max-width: 1200px;
	z-index: 999;
	transition: background-color 0.3s ease-in;
	background-color: transparent;
	background-color: rgba(197,150,133,0.90); 
}


#content{
	width:100%;
	background-color: #f9f5f0;
	/*
	max-width: 1200px;
	*/
}



/**
 * Header
 */


#logo{
	padding-top: 0px;
    width: 60%;
    margin-right: 0;
	/*
    margin-left: 20px;
	*/
    float: left;
    display: inline-block;
}



#logo img {
	height: 30px;
    margin-left: 14px;
    margin-top: 4px;
	max-width: 132px;

}



#menu {
	display: none;
	padding-top: 12px;
	width: 70%;
	float: right;
	text-align: right;
	padding-right: 20px;
}





/**
* Footer
*/
#footer{
	background-color:#43505b;
	color:#fff;
	text-align: center;
	padding: 60px 10px 60px 10px;
}

.footer-info{
	padding-left: 14%;
	padding-right: 14%;
}

#footer p {
	font-family: FuturaStd-Book;
	font-weight: normal;
	font-style: normal;
	
	color: #d9dcde;
	
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 1px;
	
	margin-top: 6px;
    margin-top: 0.6rem;
	margin-bottom: 14px;
    margin-bottom: 1.4rem;
}

#footer a {
	text-decoration:none;
}

#footer a:hover,
#footer a:focus {
	text-decoration:underline;
}




#footer .logo-01 {
	margin-top: 8px;
}

#footer .footer-social {
	margin-top: 60px;
}

#footer .footer-social img{
	margin: 0 6px;
}







/**
****************************************************************************************
 * Typo
 ****************************************************************************************
*/
body {
	color: #4d4d4d;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
		
	font-family: FuturaStd-Medium;
	font-weight: normal;
	font-style: normal;
	
}


h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 6px;
}


h1{
	font-size: 30px;
	font-size: 3.0rem;
	margin-top: 70px;
	margin-top: 7.0rem;		
	margin-bottom: 30px;
	margin-bottom: 3.0rem;	
		
}

h2{
	font-size: 18px;
	font-size: 1.8rem;
	margin-top: 70px;
	margin-top: 7.0rem;		
	margin-bottom: 28px;
	margin-bottom: 2.8rem;
	letter-spacing: 4px;	
	line-height: 1.5;
}

h3{
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 3px;
	margin-top: 50px;
	margin-top: 5.0rem;	
	margin-bottom: 10px;
	margin-bottom: 1.0rem;	
	
}

h4{
	font-size: 14px;
	font-size: 1.4rem;	
	text-transform: none;
	letter-spacing: 1px;
}

h5{
	font-size: 14px;
	font-size: 1.4rem;	
}
h6{
	font-size: 13px;
	font-size: 1.3rem;	
}


a {
	font-weight: normal;
	color: #4d4d4d;	
	text-decoration: underline;	
	text-decoration: none;	
	transition: color 0.2s ease-in;
	transition: background-color 0.2s ease-in;
}

a:hover,
a:focus {
	color: #dcd7d2;	
	text-decoration: none;
}


a img {
	opacity: 1.0;
	transition: opacity 0.2s ease-in-out;
}

a img:hover {
	opacity: 0.6;
}



p {
	margin-bottom: 22px;
	margin-bottom: 2.2rem;
	letter-spacing:0;
}


b,
strong {
	font-weight: 700;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	text-align:left;
	color: #7daabe;
	margin:30px;
	
}



blockquote p {
	margin-bottom: 1.6667em;
}

blockquote > p:last-child {
	margin-bottom: 0;
}

blockquote cite,
blockquote small {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

address {
	font-style: italic;
	margin: 0 0 1.6em;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: monospace;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre {
	background-color: transparent;
	background-color: rgba(0, 0, 0, 0.01);
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
	line-height: 1.2;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 0.8em;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

abbr[title] {
	border-bottom: 1px dotted #eaeaea;
	border-bottom: 1px dotted rgba(51, 51, 51, 0.1);
	cursor: help;
}

mark,
ins {
	background-color: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;

	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}



/**
 * 4.0 Elements
 */

hr {
	background-color: #58585a;
	border: 0;
	height: 1px;
	margin-bottom: 1.6em;
}

ul,
ol {
	margin: 0 0 16px 18px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

dl {
	margin-bottom: 1.6em;
}

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 1.6em;
}

table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 0.4em;
}



figure {
	margin: 0;
}

del {
	opacity: 0.8;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
	color: rgba(51, 51, 51, 0.7);
}

:-moz-placeholder {
	color: rgba(51, 51, 51, 0.7);
}

::-moz-placeholder {
	color: rgba(51, 51, 51, 0.7);
	opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
	color: rgba(51, 51, 51, 0.7);
}




.text-2-columns {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	-webkit-column-gap: 0; /* Chrome, Safari, Opera */
	-moz-column-gap: 0; /* Firefox */
	column-gap: 0px;
	text-align: center;
}

p.ingress{	
	font-size: 14px;
	font-size: 1.4rem;
	font-family: FuturaStd-Book;
	font-weight: normal;
	font-style: normal;
}



/**
****************************************************************************************
 *  Menu
 ****************************************************************************************
 */
#mainmenu {
}





/* ************************************************************************ */
/* Menus */

/* Huvudmeny */
#main-menu ul  {
}

#main-menu ul li {
	display: inline-block;	
}

#main-menu ul li a {
	font-size: 10px;
	font-size: 1.0rem;
	letter-spacing: 2px;
	padding: 4px 6px;
		
	font-weight: normal;
	text-decoration: none;
	
	color:#fff;
	border: 1px solid transparent;
		
	text-transform: uppercase;
	background-color: transparent;
	
	transition: color 0.2s ease-in;	
	transition: border 0.2s ease-in;
	transition: font-size 0.2s ease-in;
	transition: padding 0.2s ease-in;	
}

#main-menu ul li a:hover,
#main-menu ul li a:active,
#main-menu ul li a:focus  {
	color:#fff;
	border: 1px solid #fff;
}

#main-menu ul li.current-page-ancestor a,  #main-menu ul li.current_page_item a  {
	color:#fff;	
	/*
	background-color:#fff;
	*/
}

#main-menu ul li:last-child {
	margin-right:0px;
}




/* Mobilmeny */
#mobile-menu {
	display: block;
	
}

#mobile-menu-pages {	
	display: none;
	padding: 10px 0 20px 0;
}

#mobile-menu ul {
	padding: 0 0 0 4px;
	margin: 0 0 10px 12px;
	list-style: none;
}

#mobile-menu li {
	padding: 10px 0 0 0;
	font-weight:normal;
	font-size: 22px;
}


#mobile-menu ul li a {
	
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 4px;
	padding: 4px 6px;
		
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	
	color:#fff;
	border: 1px solid transparent;
	
	transition: color 0.2s ease-in;	
	transition: border 0.2s ease-in;
	transition: font-size 0.2s ease-in;
	transition: padding 0.2s ease-in;	
}

#mobile-menu ul li a:hover,
#mobile-menu ul li a:active,
#mobile-menu ul li a:focus  {
	color:#fff;
	border: 1px solid #fff;
}

#mobile-menu ul li.current_page_item > a {
	color:#5e3b0b;
	border-bottom:2px solid #5e3b0b;
	line-height: 1.4;
}


#toggler {
	padding: 20px 20px;
	margin: 0;
	margin-right: 10px;
	background-image: url('images/btn-menu.png');
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        #toggler{
			background-image: url('images/btn-menu@2x.png');
			background-size: 26px 21px;
		}
}


.toggled {
	background-image: url('images/btn-closee.png') !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        #toggled{
			background-image: url('images/btn-closee@2x.png');
			background-size: 20px 20px;
		}
}






@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        #mainmenu{
			background-image: url('');
			background-size:368px 370px;
		}
}


/**
****************************************************************************************
* Hero
****************************************************************************************
*/

.hero{
	height: 440px;	
	width: 100%;
	background-image: url("");
	background-repeat: no-repeat;
	background-position: center top;
	display: table;
	background-size: cover;
	-moz-background-size: cover;  /* Firefox 3.6 */
	background-position: center;  /* Internet Explorer 7/8 */
}

.hero-content{
	display: table-cell;
	vertical-align: bottom;	
	padding-bottom: 40px;
}


.hero-text{
	color: #fff;
	text-align: center;
	width: 88%;
	margin: 0 auto;	
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 2.0;
}

.hero-text-main{
	margin-bottom: 50px;
}

h1.hero-text{	
	line-height:1.2;
	font-style: normal;	
	/*
	text-shadow: 2px 2px 6px rgba(68, 68, 68, 0.8);
	*/

}
p.hero-text{
	font-size: 12px;
}

p.hero-link-text{
	font-size: 13px !important;
	letter-spacing: 4px !important;
}

#btn-play{
	margin-top: 24px;	
}



/**
****************************************************************************************
*  News
****************************************************************************************
*/
#nyhetsbrev { margin-top: 60px;}
#nyhetsbrev-2 { margin-bottom: 60px;}
#om-projektet { margin-top: 60px;}


/**
****************************************************************************************
 *  Content
 ****************************************************************************************
 */
.content-block{
	width: 88%;
    margin: 0 auto !important;
	text-align: center;
}

a.btn,
#viskaholm a{
	display: inline-block;
	font-size: 12px;
	font-size: 1.2rem;
	color: #4d4d4d;
	text-transform: uppercase;
	text-decoration: none;
	background-color: transparent;
	border: 1px solid #959a9e;
	letter-spacing: 3px;
	margin: 24px 5%;
	padding: 12px 14px;
	max-width: 416px;
	width: 90%;
	transition: color 0.2s ease-in;
	transition: border 0.2s ease-in;
	transition: background-color 0.2s ease-in;
	
	padding-top: 14px;
	padding-bottom: 10px;	
		
}



a.btn:hover {
	color: #4d4d4d;
	background-color: #959a9e;
	border: 1px solid #4d4d4d;
} 

a.btn.btn-white {
	color: #fff;
	background-color: transparent;
	border: 1px solid #fff;
}

a.btn.btn-white:hover  {
	color: #4d4d4d;
	background-color: #f1f1f1;
	border: 1px solid #4d4d4d;
} 


#viskaholm a {
	color: #fff;
	background-color: transparent;
	border: 1px solid #fff;
	margin-top: 12px;
	margin-bottom: 12px;
}

#viskaholm a:hover {
	color: #4d4d4d;
	background-color: #f1f1f1;
	border: 1px solid #4d4d4d;
}




.bread{	
	font-family: FuturaStd-Book;
	font-weight: normal;
	font-style: normal;	
	margin-top: 60px;
	margin-bottom: 60px;	
}

#historia .bread{	
	margin-bottom: 0px;	
}



.hide{
	display:none;	
}

/**
****************************************************************************************
*  Intresseanmalan
****************************************************************************************
*/
#intresseanmalan{
	margin-bottom: 30px;	
}


/**
****************************************************************************************
*  Intresseanmalan
****************************************************************************************
*/
#dina-ideer{
	padding-top: 1px;	
	padding-bottom: 30px;	
}



/**
****************************************************************************************
*  Vårt Västerbro
****************************************************************************************
*/

#vart-vasterbro {
		
}


#vart-vasterbro .teaser-content{
	height: 400px; 
}

#vart-vasterbro .teaser-bg-image {
    min-height: 400px;
}

#vart-vasterbro-film {
padding: 80px 0;	
}

.film-wrapper {
	padding-bottom: 40px;
}

.film-title {
	font-weight: 700;
	letter-spacing: 1px;
	padding-bottom: 4px;
}

.film-text {
	letter-spacing: 0px;
	padding-bottom: 6px;
}



/**
****************************************************************************************
*  Timeline
****************************************************************************************
*/
#om-projektet .content-block{
	width: 82%;
}

#om-projektet .ingress{
	width: auto;
	margin: 0 auto;
}

#timeline {
	margin-top: 60px; 
	margin-bottom: 60px;
}

#timeline-years{
	margin-bottom: 15px;
	margin-bottom: 0;
}

#timeline ul  {
	margin: 0;
	padding: 0;	
	
	background-image: url('images/timeline-line-bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 98% 80px;
}

#timeline ul li {
	display: inline-block;	
	margin: 0;
	padding: 0;	
	float: left;	
	text-align: left;
}



#timeline ul li.n1 { width: 100%; margin-right: 0%; }
#timeline ul li.n2 { width: 30%; margin-right: 40%; }
#timeline ul li.n3 { width: 20%; margin-right: 20%; }
#timeline ul li.n4 { width: 19%; margin-right: 8%; }
#timeline ul li.n5 { width: 14%; margin-right: 7.5%; }
#timeline ul li.n6 { width: 14%; margin-right: 3.2%; }
#timeline ul li.n7 { width: 13%; margin-right: 1.5%; }
#timeline ul li.n8 { width: 10%; margin-right: 2.857%; }

#timeline ul li.n9 { width: 9%; margin-right: 2.375%; }
#timeline ul li.n10 { width: 8%; margin-right: 2.222%; }
#timeline ul li.n11 { width: 7%; margin-right: 2.222%; }
#timeline ul li.n12 { width: 7%; margin-right: 1.454%; }
#timeline ul li.n13 { width: 6%; margin-right: 1.833%; }
#timeline ul li.n14 { width: 6%; margin-right: 1.230%; }
#timeline ul li.n15 { width: 5%; margin-right: 1.78%; }
#timeline ul li.n16 { width: 5%; margin-right: 1.333%; }

#timeline ul li:first-child {
	text-align: left;
}

#timeline ul li:last-child {
	text-align: left;
	margin-right: 0;
}

#timeline ul li a {
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
	letter-spacing: 0px;
	padding: 16px 0;
	color: #fff;
	background-color: #43505c;
	border: 1px solid transparent;
	transition: color 0.2s ease-in;	
	transition: border 0.2s ease-in;	
	width: 100%;
	text-align: center;
	display: inline-block;		
}


#timeline ul li a:hover,
#timeline ul li a:active,
#timeline ul li a:focus,
#timeline ul li a.current  {
	color:#fff;
	border: 1px solid transparent;
	background-color: #696e73;	
}


#timeline ul li:last-child {
	margin-right:0px;
}

#timeline-info{
	text-align: left;
	background-color: #fff;	
	padding: 40px 36px 20px 36px;
	margin: 0;
}



.timeline-text h3 {
    margin-top: 0;
}


/**
****************************************************************************************
 *  Contact
 ****************************************************************************************
 */
#kontakt{
	margin-bottom: 60px;	
}

#kontakt h3{ }

#kontakt p{
	font-family: FuturaStd-Book;
	font-weight: normal;
	font-style: normal;
	
	margin-top: 0;
	margin-bottom: 0;
	margin-bottom: 0rem;
	
	}


/**
****************************************************************************************
 *  Anmälan
 ****************************************************************************************
 */
.header-anm{ background-color: #43505b !important; padding-top: 36px !important; padding-bottom: 36px!important; }
.header-anm.fixed{ background-color: #43505b !important; padding-top: 16px !important; padding-bottom: 16px!important;}
.header-anm.fixed #logo img { padding-top: 0 !important; }


.header-anm #header-content { width: 100%; text-align: center; }
.header-anm.fixed #header-content { text-align: left; }
.header-anm #header-content #logo { float: none; margin: 0; padding-left: 0;}

.header-anm.fixed #header-content #logo { float: left !important; padding-left: 2%;}

.page-template-tpl-form #intro,
.page-template-tpl-form-vasterbro-workshop #intro,
.page-template-tpl-form-viskaholm-inflyttningsfest #intro {margin-top: 70px; }

    
@media screen and (min-width: 768px) {
	.page-template-tpl-form #intro,
	.page-template-tpl-form-vasterbro-workshop #intro,
	.page-template-tpl-form-viskaholm-inflyttningsfest #intro {margin-top: 120px; }
	.header-anm #header-content { text-align: center; }
}





/**
****************************************************************************************
 *  Forms
 ****************************************************************************************
 */
.contact-forms{
	color: #43505b;
	text-align: center;
}

.contact-forms h3{
	margin: 0;
	padding-top: 40px;
	padding-bottom: 30px;	
}

#form4.contact-forms h3{
	padding-bottom: 6px;	
}

.contact-forms p{
	text-transform: uppercase;
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: 2px;	
}


#form4.contact-forms p.ingress, #form4.contact-forms p.info-text{
	font-size: 16px;
	font-size: 1.6rem;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 40px;
}

#form4.contact-forms h4{
	margin-bottom: 20px;
	margin-bottom: 2.0rem;
}

 
#form1{
	background-color: #9da4aa;
}

#form2{
	background-color: #b6bbbf;
}

#form4{
	background-color: #ddc2b8;
}


.contact-forms .form-submit{
	text-align: right;
	text-align: center;	
}



.wpcf7-form input[type="submit"], .slide-btn, .wpcf7-form input[type="submit"], .slide-btn-prev {
	font-family: FuturaStd-Medium;
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	color: #43505b;
	text-transform: uppercase;
	text-decoration: none;
	background-color: transparent;
	border: 1px solid #43505b;
	letter-spacing: 4px;
	margin: 24px 0;
	padding: 12px 36px;
	transition: color 0.2s ease-in;
	transition: border 0.2s ease-in;
	transition: background-color 0.2s ease-in;
	-webkit-border-radius:0; 
	border-radius:0;
	line-height: 21px;

}

#form4 .form-submit{
display: inline-block;
}

#form4 .slide {
	margin-bottom: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid #43505b;
}

#form4 .slide:last-child {
	margin-bottom: 20px;
	padding-bottom: 0px;
	border-bottom: none;
}



.slide-btn-prev {
	margin-right: 16px;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
	-webkit-border-radius:0; 
	border-radius:0;
}



.wpcf7-form input[type="submit"]:hover, .slide-btn:hover, .slide-btn-prev:hover {
	color: 4d4d4d;
	background-color: #959a9e;
	border: 1px solid #4d4d4d;
	cursor: pointer;
	outline: 0;
} 

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus,
.wpcf7-form input[type="submit"]:active {
	outline: 0;
}




.wpcf7-form input[type="submit"].submit-white, .slide-btn, .slide-btn-prev {
	color: #fff;
	background-color: transparent;
	border: 1px solid #fff;
}


.wpcf7-form input[type="submit"].submit-white:hover, .slide-btn:hover, .slide-btn-prev:hover  {
	color: #4d4d4d;
	background-color: #f1f1f1;
	border: 1px solid #4d4d4d;	
} 




.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	font-family: FuturaStd-Medium;
	max-width: 400px;
	width: 90%;	
	color: #43505b;

	display:inline-block;
    padding: 4px 10px;    	
	border: 1px solid #43505b;	
	font-size: 16px;
	margin: 0;
	line-height: normal;
	
	
	background-color: #fff;
	-webkit-border-radius:0; 
	border-radius:0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
	height: 40px;
}

	
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="submit"],
.wpcf7-form textarea {
	-webkit-appearance: none;
}



div.wpcf7-response-output {
	margin: 4px auto 16px auto !important;
	padding: 1.5em 1.5em !important;
	max-width: 500px;
	width: 96%;	
	margin-top: 20px !important;
}

.wpcf7-validation-errors {
	background-color: #c59685 !important;
	border: 1px solid #f9f5f0 !important;
	font-size: 15px !important;
	color: #f9f5f0 !important;
}	


span.wpcf7-not-valid-tip {
	/*
	background-color: #c59685 !important;
	border: 1px solid #f9f5f0 !important;
	*/
	font-size: 13px !important;
	color: #f9f5f0 !important;
}
.wpcf7-not-valid-tip {
	margin: 1px auto 6px auto !important;
	padding: 1px 8px 4px 8px !important;
	max-width: 380px;
	width: 80%;	
	text-transform: none;
	letter-spacing: 0;
}

span.wpcf7-form-control-wrap {
  position: static !important;
  margin-top: 4px !important;
    display: block;
}


div.wpcf7-mail-sent-ng {
	background-color: #f9f5f0 !important;
	border: 2px solid #df290b !important;
	color: #df290b !important;
}	

.wpcf7-mail-sent-ok{	
	background-color: #f9f5f0 !important;
	border: 2px solid #43505b !important;
	color: #43505b !important;
}
	
	
.wpcf7-form textarea {
	height: 120px;
	padding: 14px 10px;
	resize: none;
}


.wpcf7-form label span {
	text-transform: none;
	letter-spacing: 1px;
}


#form1 .wpcf7 img.ajax-loader, #form2 .wpcf7 img.ajax-loader, #form3 .wpcf7 img.ajax-loader, #form4 .wpcf7 img.ajax-loader{
	clear:both !important;	
	display:block !important;	
	margin: 0 auto !important;	

}



.wpcf7-recaptcha > div {
margin: 0 auto;
padding-top: 20px;
margin-bottom: 80px;
}
	
	
/**
****************************************************************************************
* wpcf7
****************************************************************************************
*/
/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=checkbox],
input[type=radio] {
	display:none; 
	margin:10px;
}
 
/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=checkbox] + span,
input[type=radio] + span {
	display:inline-block;
	margin:-2px;
	margin-bottom: 10px;
	padding: 4px 30px;
	background-color: #fff;	
	-webkit-border-radius: 0; 
	-moz-border-radius: 0; 
	border-radius: 0;
}


input[type=checkbox] + span:hover,
input[type=radio] + span:hover {
	cursor: pointer;
}

/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=checkbox]:checked + span,
input[type=radio]:checked + span { 
	background-image: none;
}

input[type=checkbox] + span,
input[type=radio] + span {
	margin-left:6px;
}

input[type=checkbox] + span,
input[type=radio] + span{
	border: 1px solid #43505b;
}


input[type=checkbox]:checked + span,
input[type=checkbox] + span:hover,
input[type=radio]:checked + span,
input[type=radio] + span:hover {
	background-color: #43505b;	
	border: 1px solid #43505b;
	color: #fff;
}










/**
****************************************************************************************
 *  Slider
 ****************************************************************************************
 */
 .royalSlider{
	 margin-top: 0px;
	 height: 396px;
 }
 
.rsDefault .rsBullets {
    bottom: 10px !important;
    line-height: 20px !important;
}


.rsDefault, .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs {
    background: #fff !important;
    color: #151515 !important;
}


@media screen and (min-width: 0px) and (max-width: 600px) {
	.rsOverflow,
	.royalSlider {
		height: 400px !important;
	}

	.royalSlider img {
		max-width: 600px;
	}
}
  
@media screen and (min-width: 600px) and (max-width: 768px) {
	.rsOverflow,
	.royalSlider {
		height: 600px !important;
	}
	
	.royalSlider img {
		max-width: 1000px;
	}
}  
  
@media screen and (min-width: 768px) {	
	.rsOverflow,
	.royalSlider {
		height: 600px !important;
	}
	
	.royalSlider img {
		max-width: 1200px;
	}
}






/**
****************************************************************************************
 *  WP-admin
 ****************************************************************************************
 */
.alignleft {
	display: inline;
	float: left;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}


blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
	margin: 0.4em 1.6em 1.6em 0;
}

blockquote.alignright,
.wp-caption.alignright,
img.alignright {
	margin: 0.4em 0 1.6em 1.6em;
}

blockquote.aligncenter,
.wp-caption.aligncenter,
img.aligncenter {
	clear: both;
	margin-top: 0.4em;
	margin-bottom: 1.6em;
}

.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
	margin-bottom: 1.2em;
}




/**
****************************************************************************************
 *  Media
 ****************************************************************************************
 */
audio,
canvas {
	display: inline-block;
}

embed,
iframe,
object,
video {
	margin-bottom: 1.6em;
	max-width: 100%;
	vertical-align: middle;
}





/**
****************************************************************************************
 *  Scroll menu
 ****************************************************************************************
 */
.menu-scroll{
}

.fixed {
	position: fixed !important; 
	/*
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	*/	
	z-index: 9999;
	
	display: block !important;
		
	background-color: rgba(105,110,115,0.85) !important; 	
	background-color: rgba(197,150,133,0.90)   !important; 	
}

.fixed img {
	/*
	padding-top: 10px;
	width: 40%;	
	*/
}


















.teaser{
	text-align: center;
	margin: 0 14%;
	padding-top: 40px;
	padding-bottom: 40px;
}

.teaser-content{
	display: table;
	min-height: 470px;
	height: 470px; 
	width: 100%;
}


.teaser-text{
	display: table-cell;
    vertical-align: middle;
	
	font-family: FuturaStd-Book;
	font-weight: normal;
	font-style: normal;
}

.teaser h2{
	margin-top: 0;
}

.teaser-bg-image { 
	background-repeat:no-repeat;
	background-position: center center; 
	background-size:cover;
	min-height: 470px;  
	margin: 0; 
}

.fb-follow{
	margin-top: 0;
}

.fb-follow img{
	margin-bottom: 12px;
}

.fb-follow p{
	margin-bottom: 0;
}

.fb-follow a, #teaser-2 a{
	transition: color 0.2s ease-in;
	color: #fff;
}

.fb-follow a:hover, #teaser-2 a:hover{
	color: #c59685;
	
}



.bg-darkgrey{
	background-color:#696e73;
	color:#fff;
}

.bg-sand{
	background-color:#c59685;
	color:#fff;
}

.bg-sand-light{
	background-color:#f9f5f0;
	color: #4d4d4d;
}

.bg-pink-light{
	background-color:#e3c1b7;
	color: #43505b;
}


/**
****************************************************************************************
* Simple fade transition,
****************************************************************************************
*/
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}







/**
****************************************************************************************
 * Banner
 ****************************************************************************************
 */
 .content-banner {
	border: 20px solid #696e73;
	margin-top: 40px;
	padding: 60px;
	text-align: center;
 }

 .banner-wrapper {
	margin: 0 auto;
	max-width: 840px;
 }

 .content-banner h2 {
	margin-top: 0;
	font-size: 26px;
    font-size: 2.6rem;
    letter-spacing: 5px;
 }

 .content-banner p {
	font-size: 16px;
    font-size: 1.6rem;
 }


.content-banner a.btn.btn-white {
	border: 1px solid #696e73;
    background-color: #696e73;
}

.content-banner a.btn.btn-white:hover {
	border: 1px solid #696e73;
    background-color: #f1f1f1;
}






















/* ============================================================================= */
/* ============================================================================= */
/* ============================================================================= */
/* Responsive design */
/*  SECTIONS  ============================================================================= */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}



/*  GROUPING  ============================================================================= */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}



/*  GRID COLUMN SETUP   ==================================================================== */
.col {
	display: block;
	float:left;
	margin: 0 0 0 0%;
}

.col:last-child, .contact-list .col:last-child { margin-right: 0; } /* all browsers except IE6 and lower */

.col-right{
	float: right;
}

@media only screen and (min-width: 768px) {
	.col{ 
		margin: 0% 0 0% 0%;
	}

}

/*  GRID OF COLUMNS   ============================================================================= */

.span_2_of_2, .span_1_of_2  {
	width: 100%; 
}

#kontakt .col.span_1_of_2{
		width: 100%;
		margin: 0;	
}	

.film_1_of_3 { width: 100% }
.film_1_of_2 { width: 100% }

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

@media only screen and (min-width: 768px) {
	.span_1_of_2 {
		width: 50%; 
	}
	
	#kontakt .col.span_1_of_2{
		width: 40%;
		margin: 0 5%;	
	}
	
	.film_1_of_3 { width: 30%;  margin-right: 5%; }
	.film_1_of_2 { width: 47.5%;  margin-right: 5%; }
}


/* ============================================================================= */
/* ============================================================================= */
/* ============================================================================= */




/**
****************************************************************************************
 * Media Queries
 ****************************************************************************************
 */
/*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}



@media screen and (min-width: 320px) {} 
@media screen and (min-width: 400px) {
	
	

	h2{
		font-size: 22px;
		font-size: 2.2rem;
		letter-spacing: 6px;	
	}
	
	
	h3{
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 4px;
	}
	
	h4{
	font-size: 18px;
	font-size: 1.8rem;	
	}

	a.btn {
		font-size: 14px;
		font-size: 1.4rem;
		letter-spacing: 2px;
	}
	
}
@media screen and (min-width: 600px) {


	.hero{
	height: 600px;	

}

	.hero-text{
		width: 70%;
		letter-spacing: 5px;	
	}
	
	p.hero-text{
		font-size: 16px;
	}	
	
	
	p.ingress{	
	font-size: 16px;
	font-size: 1.6rem;
}


h2{
		font-size: 25px;
		font-size: 2.5rem;
		letter-spacing: 7px;	
	}


a.btn {
	font-size: 15px;
	font-size: 1.5rem;
	letter-spacing: 3px;
	
	padding-left: 4px;
	padding-right: 4px;
}

.teaser{
	padding-top: 0;
	padding-bottom: 0;
}

.teaser h2{
	font-size: 22px;
	font-size: 2.2rem;
	letter-spacing: 5px;	
}

#om-projektet .ingress{
	width: 70%;
}


#footer{
	padding-top: 100px;
}


}

/**
 * Mobile Large 620px
 */
@media screen and (min-width: 620px) {

	
	
	#timeline ul li a {
		font-size: 13px;
		letter-spacing: 1px;	
	}
	
	
	#timeline ul li.n5 { width: 10%; margin-right: 12.5%; }
	#timeline ul li.n6 { width: 10%; margin-right: 8%; }
	#timeline ul li.n7 { width: 10%; margin-right: 5%; }
	#timeline ul li:last-child { margin-right: 0px; }
	
}

/**
 * Tablet Small 740px
 */
@media screen and (min-width: 740px) {}
@media screen and (min-width: 768px) {
	
	

	#header{
		background-color: transparent;
		padding-top: 20px;
	padding-bottom: 20px; 	
	}
	
	#logo{
	padding-top: 0px;
	padding-left: 3%;
	width: 26%;
	width: 23%;
	margin-right: 1%;		
	float: left;
	text-align: left;

}

#logo img {
	height: auto;
	min-width: 110px;
	max-width: 100%;
	margin-left: 0;
    margin-top: 0;
}



	
	#menu {
		display: block;
		width: 73%;
	}
	#mobile-menu {
		display: none;
	}	
	
	
	
	
	.fixed {

	padding-top: 2px !important;
	padding-bottom: 2px !important;
		
}

.fixed img {
	
	padding-top: 10px;
	width: 40%;	
	
}
	
	
	
	#footer .span_1_of_2{
		text-align: right;
	}
	#footer .span_1_of_2:last-child{
		text-align: left;	
	}
	#footer .span_1_of_2 img{
		padding: 0 28px;
	}
	
	
	#footer .span_1_of_2b{
		text-align: center;
	}
	#footer .span_1_of_2b:last-child{
		text-align: center;	
	}
	#footer .span_1_of_2b img{
		padding: 0 0;
	}
	
	
	.content-block{
		width: 70%;
	}
	
	
	.hero-content{
		vertical-align: middle;	
		vertical-align: bottom;
		padding-bottom: 60px;
	}
	
	.hero-text{
		width: 64%;
		letter-spacing: 6px;	
	}
	
	p.hero-text{
		font-size: 18px;
	}
	
	.text-2-columns {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
		-moz-column-gap: 60px; /* Firefox */
		column-gap: 60px;
		text-align: left;
	}
	
	
	
	#timeline ul li a {
		font-size: 12px;
		letter-spacing: 0;	
	}
	
	
	#vart-vasterbro .teaser-content { height: 400px; }
	#vart-vasterbro .teaser-bg-image { min-height: 400px; }


	.content-banner h2 { font-size: 32px; font-size: 3.2rem; }
	

}

/**
 * Tablet Large 880px
 */
@media screen and (min-width: 880px) {
	
	#vart-vasterbro .teaser-content { height: 460px; }
	#vart-vasterbro .teaser-bg-image { min-height: 460px; }
}


/**
 * Desktop Small 955px
 */
@media screen and (min-width: 955px) {} 
@media screen and (min-width: 980px) {

	#main-menu ul li a {
		font-size: 13px;
		font-size: 1.3rem;
		letter-spacing: 2px;
		padding: 4px 8px;
	}	
	
	
	}
@media screen and (min-width: 1100px) {
		#main-menu ul li a {
		font-size: 13px;
		font-size: 1.3rem;
		letter-spacing: 2px;
		padding: 4px 8px;
	}	
	
	#vart-vasterbro .teaser-content { height: 580px; }
	#vart-vasterbro .teaser-bg-image { min-height: 580px; }
	
}
@media screen and (min-width: 1200px) {

	#main-menu ul li a {
		font-size: 13px;
		font-size: 1.3rem;
		letter-spacing: 4px;
		padding: 4px 12px;
	}
	
}
@media screen and (min-width: 1240px) {}
@media screen and (min-width: 2000px) {}


@media print {
	body {
		background: none !important; /* Brute force since user agents all print differently. */
	}
}


/**
****************************************************************************************
 * PAGE SLIDER 210326
 ****************************************************************************************
 */


 .pageslider .rsDefault .rsBullet span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #b4b9bd;
}

.pageslider .rsDefault .rsBullet span:hover {
   cursor: pointer;
}

.pageslider .rsDefault .rsBullet.rsNavSelected span {
    background-color: #43505b;
}



.pageslider .rsDefault .rsBullets {
	bottom: 0px !important;
}

.pageslider .rsDefault .rsBullet {
    padding: 8px 10px 8px !important;
}


#dina-ideer {
    padding-top: 0px;
    padding-bottom: 0px;
}

.rsDefault, .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs {
    background: transparent !important;
    color: #151515 !important;
}

@media screen and (min-width: 768px) {	
	.pageslider	.rsOverflow,
	.royalSlider {
		height: 800px !important;
	}
	
	.pageslider	.royalSlider img {
		max-width: 1200px;
	}
}

/*
.pageslider .royalSlider{
	height: 496px !important;
}

.pageslider .slider-image img{
	height: 496px !important;
}
*/