/*general style*/
*{
margin:0px;
padding:0px;
}
/*
Color Scheme 
Farbkonzept

Gold 

Bezeichnung				HEX		RGB
Gold sehr hell			FFE3AA	255,227,170
Gold hell				D4B16A	212,177,106
Gold					AA8439	170,132,57
Gold dunkel				805C15	128,92,21
Gold sehr dunkel		553900	85,57,0


Schwarzweiss

Bezeichnung				HEX		RGB
Weiss					FFFFFE	255,255,254
Grau hell				B3B3B3	179,179,179Q
Grau					747474	116,116,116
Grau dunkel				252525	37,37,37
Goldgrau sehr dunkel	201B12	32,27,18
*/
@color-gold-bright2:    #FFE3AA;
@color-gold-bright1:    #D4B16A;
@color-gold-standard:   #AA8439;
@color-gold-dark1:      #805C15;
@color-gold-dark2:      #553900;

@color-white:           #FFFFFE;
@color-grey-bright1:    #B3B3B3;
@color-grey-standard:   #747474;
@color-grey-dark1:      #252525;
@color-goldgrey-dark2:  #201B12;
/*
Fontsizes
only if 1rem = 16px style attribute with font-size value on html element
8px = 0.5rem
9px = 0.5625rem
10px = 0.625rem
11px = 0.6875rem
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
15px = 0.9375rem
16px = 1.0rem
18px = 1.125rem
20px = 1.25rem
22px = 1.375rem
24px = 1.5rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem
32px = 2.0rem
34px = 2.125rem
36px = 2.25rem
38px = 2.375rem
40px = 2.5rem
48px = 3.0rem
56px = 3.5rem
72px = 4.5rem

*/
@8-px-in-rem:0.5rem;
@9px-in-rem:0.5625rem;
@10-px-in-rem:0.625rem;
@11-px-in-rem:0.6875rem;
@12-px-in-rem:0.75rem;
@13-px-in-rem:0.8125rem;
@14-px-in-rem:0.875rem;
@15-px-in-rem:0.9375rem;
@16-px-in-rem:1.0rem;
@18-px-in-rem:1.125rem;
@20-px-in-rem:1.25rem;
@22-px-in-rem:1.375rem;
@24-px-in-rem:1.5rem;
@26-px-in-rem:1.625rem;
@28-px-in-rem:1.75rem;
@30-px-in-rem:1.875rem;
@32-px-in-rem:2.0rem;
@34-px-in-rem:2.125rem;
@36-px-in-rem:2.25rem;
@38-px-in-rem:2.375rem;
@40-px-in-rem:2.5rem;
@56-px-in-rem:3.5rem;
@48-px-in-rem:3.0rem;
@72-px-in-rem:4.5rem;

/*font family*/
@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway:100,400');

@font-Raleway: 'Raleway', sans-serif;
@font-Montserrat: 'Montserrat', sans-serif;


html{
    font-size: 16px;
}

@media screen and (max-width:1300px){
    html{
        font-size: 15px;
    }
}
@media screen and (max-width:1024px){
    html{
        font-size: 13px;
    }
}
@media screen and (max-width:700px){
    html{
        font-size: 12px;
    }
}
@media screen and (max-width:500px){
    html{
        font-size: 11px;
    }
}

body{
	font-family:@font-Montserrat;
	font-weight: 100;
    margin:0;
    padding:0;
    background-color: #252525;
}

header{
	width: 100%;
	background: @color-goldgrey-dark2;

}
header h1{

    /* background: black; */
    max-width: 1000px;
    font-size: 89.6px;
    font-weight: 600;
    /* line-height: 170%; */
    padding: -2px;
    margin:10px auto;
    text-align: center;
}


.content{
	background-color:#252525;
	max-width: 980px;
	margin: 0 auto;
	padding: 20px 0;
}

footer{
	width: 100%;
	background: @color-goldgrey-dark2;
}
footer .inner{
	max-width: 980px;
	margin: 0 auto;
	padding: 40px 0;
}
/*Responsive layout*/
@media screen and (max-width:1300px){
	header h1{
		font-size: 5rem;
	}
}
@media screen and (max-width:1024px){
	header h1{
		font-size:4.5rem;
	}
	.content{
		max-width: 90%;
	}
	footer .inner{
		max-width: 90%;
	}
}
@media screen and (max-width:700px){
	header h1{
		font-size:3.5rem;
	}
}
@media screen and (max-width:500px){
}

h1,h2,h3,h4,h5,h6{
	margin-bottom: @20-px-in-rem;
}

h1
{	
	font-weight: 700;
	font-size:@48-px-in-rem;
	color:@color-gold-bright2;
}
h2
{
	font-weight: 700;
	font-size:@32-px-in-rem;
	color: @color-gold-bright1;
}
p, p.standard, .standard
{
	font-size:@22-px-in-rem;
	color: @color-white;
	margin-bottom: 20px;
}
p.lead, .lead{
	font-size: @26-px-in-rem;
}
span{
	color: @color-white;
}
.blocksatz{
	text-align:justify;
	/*justify = blocksatz*/
}
img{
	width:100%;
}
p.frame{
	width:70%;
	margin: 0 auto;
}
a{
	text-decoration: none;
}
a.link{
	text-decoration: none;
	color:@color-white;
	padding: 5px 0;
	-webkit-transition:all 4s linear;
	transition:all 4s linear;
	position: relative;
}
a.link:after{
	content: "";
    height: 1px;
    background: white;
    width: 0%;
    position: absolute;
    bottom: 0px;
	left: 50%;
	transition: all 0.3s ease 0s; 
	-webkit-transition: all 0.3s ease 0s; 
}

a.link:hover:after{
    width: 100%;
    left: 0%;
}
.element{
	margin-bottom: @20-px-in-rem;
}
b.bold
{
	font-weight:bold;
}
h2.begruessung
{
	text-align:justify
}
/*font awesome icons*/
p > svg{
	margin-right: 5px;
}

/* FORMS */
input, textarea, label{
	box-sizing: border-box;
	margin-bottom: @10-px-in-rem;
}
input{
	width:100%;
	font-size:@22-px-in-rem;	
}
label{
	font-size:@22-px-in-rem;
	color: @color-white;
	margin-bottom: 20px;
	line-height: @30-px-in-rem;
}
textarea{
	width:100%;
	font-family:@font-Montserrat;
	font-size:@22-px-in-rem;
	font-weight: bold;
}
button{
	width:100%;
	font-size:@22-px-in-rem;
	margin-bottom: @10-px-in-rem;
	padding:@10-px-in-rem;
}
button:hover{
	cursor: pointer;
}

/*ToggleMenubutton(bar)------------------------------------------------------------------------Menubutton Toggle*/
#menubar ul{
	list-style-type:none;
	
	}
#menubar .menubutton
	{
		display:none;
		
	}
/*Header */
header
{
	padding:10px 0;
    
}

/*Navigation*/
nav
{
	text-transform: uppercase;
	display:block;
	background:@color-grey-dark1;
	text-align:center;
	max-width: 980px;
	margin:0 auto;
}
	
nav .row div a{
	color:white;
	-webkit-transition:color 0.3s linear 0s;
	transition:color 0.3s linear 0s;
	display: block;
	padding:1rem 0;
}
nav .row div a:hover{
	color:@color-gold-bright1;
	background: @color-goldgrey-dark2;
}
nav .col-1 .icon{
	font-size: 1.5rem;
	display:block;
}



/*--------------------------------------------------------------------------------------BILDERGALERIE*/

/*Mobile css */
/*media screen wenn der bildschirm kleiner(max-width) als zb. 800 px ist*/
@media screen and (max-width:1200px){
    header{
      background-size: 75%;
    }

}
@media screen and (max-width:910px){
	iframe
        {
              width:600px;
        }
}
@media screen and (max-width:750px){
	nav ul li a
	{
		color:#808080;
		font-size: 1.125em;
		line-height:2.5em;
		padding:0.4em;
		transition:color 0.3s linear 0s;
	}
	iframe
        {
              width:500px;
              height:500px;
        }
}
@media screen and (max-width:600px){
	article
	{
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
	iframe
        {
              width:350px;
              height:350px;
        }
}

/*media screen wenn der bildschirm grösser(min-width) als zb. 550 px ist*/

@media screen and (min-width:550px){
	nav.nav
	{
		display:block !important;
	}
}