@charset "UTF-8";
/* CSS Document */


/* ##### GENERELL SETTINGS #####----------------------------------*/


body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	
	background-color:rgba(244,245,246,1);
	color:rgba(100,100,100,1);
	font-family:'merriweather_light';
	font-size:15px;
	line-height:1.4em;
	letter-spacing:0.04em;
}

@font-face {
    font-family:'univers_light_con'; 
    src: url('fonts/univers/light_con/univers_con_light.eot') format('eot');
	src: url('fonts/univers/light_con/univers_con_light.eot#?iefix') format('embadded open type'),
		 url('fonts/univers/light_con/univers_con_light.woff') format('woff'),
    	 url('fonts/univers/light_con/univers_con_light.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'univers_black'; 
    src: url('fonts/univers/black/univers_extra_black.eot') format('eot');
	src: url('fonts/univers/black/univers_extra_black.eot#?iefix') format('embadded open type'),
		 url('fonts/univers/black/univers_extra_black.woff') format('woff'),
    	 url('fonts/univers/black/univers_extra_black.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather_light';
    src: url('fonts/merriweather/light/merriweather_light.eot');
    src: url('fonts/merriweather/light/merriweather_light.eot?#iefix') format('embedded-opentype'),
         url('fonts/merriweather/light/merriweather_light.woff2') format('woff2'),
         url('fonts/merriweather/light/merriweather_light.woff') format('woff'),
         url('fonts/merriweather/light/merriweather_light.ttf') format('truetype'),
         url('fonts/merriweather/light/merriweather_light.svg#merriweather_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather_bold';
    src: url('fonts/merriweather/bold/merriweather_ultrabold.eot');
    src: url('fonts/merriweather/bold/merriweather_ultrabold.eot?#iefix') format('embedded-opentype'),
         url('fonts/merriweather/bold/merriweather_ultrabold.woff2') format('woff2'),
         url('fonts/merriweather/bold/merriweather_ultrabold.woff') format('woff'),
         url('fonts/merriweather/bold/merriweather_ultrabold.ttf') format('truetype'),
         url('fonts/merriweather/bold/merriweather_ultrabold.svg#merriweather_ultraboldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ##### LINKS ##### ----------------------------------*/

a { color:inherit; text-decoration:none; border:0 none;}
a:hover { cursor:pointer; }

a.txtlink, a.printlink, a.listlink { text-decoration:underline; color:rgba(98,178,47,1);}
a.txtlink:hover, a.formdetail_link:hover { text-decoration:none;}

a:link img {border:0px;}

/* ##### HEADLINES | TXT | MARKUPS ##### ----------------------------------*/

h1, h2, h3, h4 { margin:0; padding:0; font-weight:normal; line-height:1.2em;}

h1 { font-family:'univers_light_con'; font-size:3.6em; }
h2 { font-family:'univers_light_con'; font-size:2.0em; }
h3 { font-family:'univers_light_con'; font-size:1.8em; }
h4 { font-family:'merriweather_light'; font-size:1.4em; }

b { font-family: 'merriweather_bold'; font-weight:normal; color:rgba(98,178,47,1);}
p { margin:20px 0; padding:0; font-size:1.1em; line-height:1.7em; float:left;}
i { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
small { font-size:0.8em;}

.txt_center { text-align:center;}
.txt_left { text-align:left;}
.txt_right { text-align:right;}
.txt_block { text-align:justify;}
.uppercase { text-transform:uppercase;}

.alpha { float:left;}
.omega { float:right !important;}

/* ##### WRAPS ##### ----------------------------------*/

.wrap_nav {}
.wrap_page {
	width:97%;
	float:left;
	min-height:auto;
	margin:100px 1.5% 0 1.5%;
	position:absolute;
	top:0;
	left:0;
	bottom:24px;
	background-color:rgba(255,255,255,1);
	overflow:scroll;
	display:none;
}

.wrap_page:before {
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: rgba(244,245,246,1) transparent transparent transparent;
	position:fixed;
	top:100px;
	z-index:100;
	left:50%;
	margin:0 0 0 -20px;
}

/* ##### LEHRSTELLE ##### ----------------------------------*/

.p_content #screen-01 {
	width:100%;
	float:left;
	min-height:750px;
	background-size:cover;
	background-position:50% 50%;
	background-image:url(../img/elements/westo_chilli_02.jpg);
}

.p_content #screen-01 .top_headline {
	width:80%;
	float:right;
	text-align:right;
	margin:80px 50px 0 0;
}

.p_content #screen-01 .top_headline h1, .p_content #screen-01 .top_headline h2 {
	font-family:'univers_black';
	color:rgba(98,178,47,1);
	width:100%; 
	float:left;
	margin:0;
	padding:0;
}

.p_content #screen-01 .top_headline h1 { font-size:7.1em; letter-spacing:0.02em; line-height:0.8em;}
.p_content #screen-01 .top_headline h2 { font-size:5.0em; letter-spacing:0.02em; line-height:1.0em;}
.p_content #screen-01 .top_headline h2:after { display:none;}
.p_content #screen-01 .top_headline h3 { color:rgba(0,0,0,1); font-size:3.0em;}

.p_content #screen-01 .intro_text {
	width:35%;
	float:right;
	text-align:right;
	margin:30px 50px 0 0;
	font-size:1.3em;
	line-height:1.5em;
}

.slide_top, 
.slide_bottom { width:100%; float:left; overflow:hidden;}

.slide_top img, 
.slide_bottom img { width:102%; float:left; margin:0; padding:0;}

.slide .right_col,
.slide .left_col {
	width:50%;
	float:left;
}

/* SCREEN 02*/

.p_content #screen-02 {
	background-color:rgba(98,178,47,1);
	color:rgba(255,255,255,1);
	width:100%;
	float:left;
	position:relative;
} 

.p_content #screen-02 .slide_top { margin-top:-6%;}
.p_content #screen-02 .slide_bottom { margin-bottom:-6%;}

.p_content #screen-02 .text {
	width:50%;
	float:left;
	margin:60px 25% 40px 25%;
	font-size:1.2em;
	text-align:center;
}

.p_content #screen-02 h2 { width:100%; float:left; text-align:center; color:rgba(255,255,255,1); margin:0 0 40px 0;}
.p_content #screen-02 h2:after { display:none;}

/* SCREEN 03*/

.p_content #screen-03 {width:100%; float:left; padding-bottom:40px;}

.p_content #screen-03 h2 { width:80%; margin:120px 10% 0 10%;}
.p_content #screen-03 .text { width:80%; margin:0px 10%;}

.p_content #screen-03 .col_right .image {}

/* SCREEN 04*/

.p_content #screen-04 {
	background-color:rgba(98,178,47,1);
	color:rgba(255,255,255,1);
	width:100%;
	float:left;
	position:relative;
}

.p_content #screen-04 .slide_top { margin-top:-11.2%;}
.p_content #screen-04 .slide_bottom { margin-bottom:-5.5%;}

.p_content #screen-04 h2 { width:80%; float:right; text-align:right; color:rgba(255,255,255,1); margin:0 10% 0 0;}
.p_content #screen-04 h2:after { display:none;}

.p_content #screen-04 .text { width:80%; margin:0 10% 0 0; text-align:right; float:right; }

.p_content #screen-04 .left_col .image { margin-top:-8%; float:left; width:80%; }

/* SCREEN 05*/

.p_content #screen-05 {
	background-color:rgba(255,216,0,1);
	color:rgba(0,0,0,1);
	width:100%;
	float:left;
}

.p_content #screen-05 h2 { width:80%; margin:120px 10% 0 10%;}
.p_content #screen-05 .text { width:80%; margin:0px 10%;}

.p_content #screen-05 .right_col .image { width:60%; float:right; margin:40px 0 0 0;}


/* SCREEN 06*/

.p_content #screen-06 {
	background-color:rgba(255,255,255,1);
	color:rgba(0,0,0,1);
	width:100%;
	float:left;
	position:relative;
}

.p_content #screen-06 .slide_top { margin-top:-5.5%;}
.p_content #screen-06 .slide_bottom { margin-bottom:-5.5%;}

.p_content #screen-06 h2 { width:80%; float:right; text-align:right; color:rgba(98,178,47,1); margin:50px 10% 0 0;}
.p_content #screen-06 h2:after { display:none;}

.p_content #screen-06 .text { width:80%; margin:0 10% 40px 0; text-align:right; float:right; }

/* SCREEN 07*/

.p_content #screen-07 {
	background-color:rgba(0,0,0,1);
	color:rgba(255,255,255,1);
	padding:120px 0 80px 0;
	width:100%;
	float:left;
}

.p_content #screen-07 h2 { width:50%; float:left; text-align:center; color:rgba(255,255,255,1); margin:80px 25% 0 25%;}
.p_content #screen-07 h2:after { display:none;}

.p_content #screen-07 .text { width:50%; margin:0 25%; text-align:center; float:left; }
.p_content #screen-07 .bto { font-size:1.4em; color:rgba(98,178,47,1); margin:40px 0;}

/* ##### NAV ##### ----------------------------------*/

.logo {
	width:120px;
	position:absolute;
	top:32px;
	left:50%;
	margin:0 0 0 -60px;
	z-index:100;
}

#nav {}
#nav > a { display:none;}

#nav > .container {
	width:800px;
	margin:0 0 0 -434px;
	position:absolute;
	z-index:90;
	top:42px;
	left:50%;
	float:left;
}

#nav label.navitem {
	width:auto;
	padding:0 2%;
	text-decoration:underline;
	font-family:'univers_light_con';
	text-transform:uppercase;
}

#nav label.navitem:hover { cursor:pointer; text-decoration:none;} 

#nav > .container label.navitem.left { float:left;}
#nav > .container label.navitem.right { float:right;}

#nav .navitem.exclusive {
	position:absolute;
	top:10px;
	right:10px;
	padding:0;
	color:rgba(98,178,47,1);
}

/* ##### IN PROGRESS ##### ----------------------------------*/

.progress {
	width:400px;
	float:left;
	margin:40px 0 0 -200px;
	position:relative;
	left:43%;
	text-align:center;
}

.progress > .icon { width:100px; margin:40px auto 20px auto; float:none;}
.progress > h2 { margin:0 0 20px 0;}
.progress > h2:after { display:none;}

/* ##### PAGE ##### ----------------------------------*/

.p_nav {
	width:3.6%;
	min-height:100%;
	float:left;
	background-color:rgba(255,255,255,1);
	position:relative;
}

.p_nav > .icon { width:20px; margin:20px 0 0 1.2%; float:left; position:fixed;}
.p_nav > .icon label:hover { cursor:pointer;}

.p_content { width:96.4%; float:left;}

.p_content .claim {
	width:90%;
	float:left;
	margin:80px 5% 0 5%; 
	color:rgba(0,0,0,1);
	float:left;
	position:relative;
	z-index:10;
	letter-spacing:0.08em;
}

.p_content .fullscreenimage, .p_content .teaserimage { background-size:cover; background-repeat:no-repeat;}

.p_content .teaserimage > .claim { margin:24px 2%; width:96%;}
.p_content .teaserimage > .claim h3 { font-size:1.4em; line-height:1.5em; color:rgba(100,100,100,1)}

.p_content .teaserimage {
	width:50%;
	position:absolute;
	height:100%;
	float:left;
	background-image:url(../img/elements/wes_sorglos_01.jpg);
	background-position:50% 50%;
}

.p_content .fullscreenimage {
	width:96.4%;
	position:absolute;
	min-height:100%;
	z-index:5;
	background-image:url(../img/elements/wes_start_image_01.jpg);
	background-position:50% bottom;
}

.p_content .container { width:43.1%; margin:24px 2.5%;}
.p_content .container.right { float:right;}
.p_content .container.left { float:left;}

.p_content h1 { text-transform:uppercase; margin-top:20px;}
.p_content h2:after {
	content:'';
	width:60px;
	height:2px;
	float:left;
	margin:50px -60px 26px 0;
	background-color:rgba(100,100,100,1);
	
}
.p_content h1, .p_content h2 { width:100%; float:left; color:rgba(0,0,0,1);}

.p_content p > .bto {
	font-family:'univers_light_con';
	color:rgba(98,178,47,1);
	font-size:1.1em;
}

.p_content .page_icon {
	width:80px;
	float:right;
	margin:20px 0 20px 0;
}

.p_content > .row, .contact {
	width:95%;
	margin:24px 2.5%;
	float:left;
}

.contact .maps {
	width:60%;
	float:right;
	margin:0 0 0 2%; 
}

.contact .adress {
	width:200px;
	float:right;
	margin:0;
	text-align:right;
	font-family:'univers_light_con';
} 

.p_content #screen-06 .text > .bto,
.contact .adress >.bto {
	font-family:'merriweather_bold';
	color:rgba(255,255,255,1);
	background-color:rgba(98,178,47,1);
	font-size:1.1em;
	float:right;
	margin:5px 0;
	padding:12px 14px 8px 14px;
}

.contact .adress > span { width:100%; float:left; margin:20px 0 0 0; font-size:1.2em;}
.contact .adress > h3 { font-size:1.4em; padding:20px 0 0 0; float:right;}

/* ##### JOBS ##### ----------------------------------*/

.jobitem {
	width:60%;
	float:left;
	margin:25px 40% 20px 0;
	border-bottom:1px solid rgba(0,0,0,1);
	padding-bottom:20px;
}

.jobitem > h2 { width:100%; float:left;}
.jobitem > h2:after { display:none;} 
.jobitem > .bto {
	font-family:'univers_light_con';
	color:rgba(98,178,47,1);
	float:left;
	margin:0px 20px 0 0;
	font-size:1.1em;
}

.wrap_jobpages {}

#job-installations-und-servicetechniker:target {display:block;}
#job-serviceteamleiter:target {display:block;}

.wrap_jobpages > .jobpage {
	width:80%;
	padding:40px 5%;
	margin:26px 5%;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.9);
	min-height:500px;
	display:none;
}

.wrap_jobpages > .jobpage .close {
	width:30px;
	position:absolute;
	margin:20px;
	top:0; 
	right:0;
}

.wrap_jobpages > .jobpage h1,
.wrap_jobpages > .jobpage h2,
.wrap_jobpages > .jobpage p { width:100%; float:left; color:rgba(255,255,255,1);}

.wrap_jobpages > .jobpage > a .bto {
	font-family:'univers_light_con';
	background-color:rgba(98,178,47,1);
	color:rgba(255,255,255,1);
	float:left;
	padding:20px 20px 16px 20px;
	text-transform:uppercase;
	font-size:1.4em;
	line-height:1.0em;
}

/* ##### REFERENZEN ##### ----------------------------------*/

.p_content > .ref {
	width:95%;
	margin:24px 2.5%;
	float:left;
}

.p_content > .ref > input[type="radio"] { position:absolute; right:0; top:-20px; display:none;}
.p_content > .ref > .portraits { 
	width:120px;
	height:auto;
	margin:20px 0 0 0;
	float:left;
}

.p_content > .ref > .portraits > label.person {
	width:120px;
	height:120px; 
	margin:0 0 10px 0;
	float:left;
	background-image:url(../img/profiles/profile_00.png);
	background-size:cover;
	background-position:50% 50%;
}


.p_content > .ref > .portraits > label.person:hover { cursor:pointer; box-shadow:0px 0px 0px 1pt rgba(0,0,0,0.1);}

.p_content > .ref > input#g_refbto-1:checked ~ .portraits > label:nth-of-type(1),
.p_content > .ref > input#g_refbto-2:checked ~ .portraits > label:nth-of-type(2),
.p_content > .ref > input#g_refbto-3:checked ~ .portraits > label:nth-of-type(3) {box-shadow:0px 0px 0px 1pt rgba(0,0,0,1);}

.p_content > .ref > .projekts { width:80%; float:left; margin:20px 0 0 0;}

.p_content > .ref > .projekts .p01,
.p_content > .ref > .projekts .p02,
.p_content > .ref > .projekts .p03,
.p_content > .ref > .projekts .p04,
.p_content > .ref > .projekts .p05,
.p_content > .ref > .projekts .p06 { width:100%; float:left; display:none;}

.p_content > .ref > input#g_refbto-1:checked ~ .projekts .p01,
.p_content > .ref > input#g_refbto-2:checked ~ .projekts .p02,
.p_content > .ref > input#g_refbto-3:checked ~ .projekts .p03 { display:block;}

.p_content > .ref > .projekts .image {width:45%; margin:0 5% 0 5%; float:left;}
.p_content > .ref > .projekts .description {width:45%; margin:0; float:left;}

.p_content > #privat.ref > .portraits { width:260px;}
.p_content > #privat.ref > .portraits > label.person {margin:0 10px 10px 0;}

.p_content > #privat.ref > .projekts { width:60%; padding-top:50px;}
.p_content > #privat.ref > .projekts p { position:relative; z-index:5;}
.p_content > #privat.ref > .projekts p,
.p_content > #privat.ref > .projekts span,
.p_content > #privat.ref > .projekts small { width:60%; margin:0 20%; float:left;}

.p_content > #privat.ref > .projekts:before {
	content:'';
	width:80px;
	height:89px;
	position:absolute;
	margin:-20px 0 0 70px;
	background-image:url(../img/icons/ic_quote.svg);
	background-size:cover;
	background-position:50% 50%;
	z-index:0;
}

.p_content > .ref > input#p_refbto-1:checked ~ .portraits > label:nth-of-type(1),
.p_content > .ref > input#p_refbto-2:checked ~ .portraits > label:nth-of-type(2),
.p_content > .ref > input#p_refbto-3:checked ~ .portraits > label:nth-of-type(3),
.p_content > .ref > input#p_refbto-4:checked ~ .portraits > label:nth-of-type(4),
.p_content > .ref > input#p_refbto-5:checked ~ .portraits > label:nth-of-type(5),
.p_content > .ref > input#p_refbto-6:checked ~ .portraits > label:nth-of-type(6) {box-shadow:0px 0px 0px 1pt rgba(0,0,0,1);}

.p_content > .ref > input#p_refbto-1:checked ~ .projekts .p01,
.p_content > .ref > input#p_refbto-2:checked ~ .projekts .p02,
.p_content > .ref > input#p_refbto-3:checked ~ .projekts .p03,
.p_content > .ref > input#p_refbto-4:checked ~ .projekts .p04,
.p_content > .ref > input#p_refbto-5:checked ~ .projekts .p05,
.p_content > .ref > input#p_refbto-6:checked ~ .projekts .p06 { display:block;}



/* ##### SORGLOSPAKET ##### ----------------------------------*/

.wrap_sorglospaket {
	width:85%;
	float:left;
	margin:0 15% 20px 0 ;
	font-family:'univers_light_con';
}
.wrap_sorglospaket label.button {
	width:31.3%;
	margin:10px 1% 10px 0;
	float:left;
	outline:1px solid rgba(98,178,47,1);
}

.wrap_sorglospaket label:hover { cursor:pointer;}
.wrap_sorglospaket label.button .icon { width:40%; margin:20px 30%; float:left;}
.wrap_sorglospaket label.button span { 
	width:100%;
	float:left; 
	padding:10px 0 8px 0;
	background-color:rgba(98,178,47,1);
	color:rgba(255,255,255,1);
	letter-spacing:0.1em;
	text-transform:uppercase;
	text-align:center;
	text-decoration:underline;
}

.wrap_sorglospaket label.button:hover span { background-color:rgba(100,100,100,1);}

.wrap_sorglospaket .wrap_gold { width:96%; float:left; outline:1px solid rgba(173,139,59,1);}
.wrap_sorglospaket .wrap_gold .wrap_icons { width:70%; float:left;}
.wrap_sorglospaket .wrap_gold .wrap_icons img { width:13%; margin:20px 6% 8px 6%; float:left;}
.wrap_sorglospaket .wrap_gold .wrap_icons span {
	width:19%;
	margin:0px 3% 10px 3%;
	float:left;
	text-transform:uppercase;
	color:rgba(173,139,59,1);
	font-size:0.8em;
	text-align:center;
}

.wrap_sorglospaket .wrap_gold > a > .button {
	 width:30%;
	 float:left;
	 padding:5% 0;
	 background-color:rgba(173,139,59,1);
	 color:rgba(255,255,255,1);
	 text-transform:uppercase;
	 text-decoration:underline;
	 text-align:center;
	 line-height:1.4em;
	 font-size:1.3em;
}



/* ##### BACKLINK ##### ----------------------------------*/

.backlink {
	width:auto;
	float:left;
	margin:5px 0;
	font-family:'univers_light_con';
	text-transform:uppercase;
}
.backlink  label:hover { cursor:pointer;}
.backlink .icon { width:16px; margin-right:8px; float:left;}

/* ##### STOERER ##### ----------------------------------*/

.stoerer {
	width:220px;
	height:220px;
	position:absolute;
	left:8%;
	bottom:60px;
	z-index:100;
	font-family:'univers_light_con';
	color:rgba(0,0,0,1);
	text-align:center;
}

.stoerer label:hover { cursor:pointer;} 

.stoerer h2 { font-size:2.6em; text-decoration:underline;}
.stoerer small { margin-top:60px;}
.stoerer h2, .stoerer small { 
	width:100%;
	float:left;
	position:relative;
}

.stoerer h2:after { display:none;}

.stoerer img { margin-top:-172px;}

/* ##### NOTIFICATION ##### ----------------------------------*/

.notification {
	width:220px;
	position:fixed;
	padding:20px;
	right:0;
	bottom:80px;
	z-index:100;
	background-color:rgba(0,0,0,1);
	font-family:'univers_light_con';
}

.notification small, .notification span { width:100%; float:left;}
.notification small { color:rgba(255,255,255,1); font-size:1.0em; letter-spacing:0.05em;}
.notification span { color:rgba(255,216,0,1); font-size:1.8em; margin:4px 0 0 0;}

/* ##### PAGE SELECTION ##### ----------------------------------*/

input#button-1,
input#button-2,
input#button-3,
input#button-4,
input#button-5,
input#button-6,
input#button-7,
input#button-8,
input#button-9 { position:absolute; right:0; top:-20px; display:none;}

input#button-1:checked ~ #westo.wrap_page,
input#button-2:checked ~ #sorglospaket.wrap_page,
input#button-3:checked ~ #heizung.wrap_page,
input#button-4:checked ~ #sanitaer.wrap_page,
input#button-5:checked ~ #energietechnik.wrap_page,
input#button-6:checked ~ #gewerbe-referenzen.wrap_page,
input#button-7:checked ~ #privat-referenzen.wrap_page,
input#button-8:checked ~ #stellen.wrap_page,
input#button-9:checked ~ #kontakt.wrap_page { display:block;}

input:checked + label.circle_label { background-color:rgba(98,178,47,1);}

label.circle_label { 
	width:10px; 
	height:10px; 
	background-color:rgba(244,245,246,1);
	position:absolute;
	left:3%;
	z-index:100;
	top:50%;
}
label.circle_label:hover { cursor:pointer;}

label.circle_label:nth-of-type(1) {margin-top:-100px;}
label.circle_label:nth-of-type(2) {margin-top:-75px;}
label.circle_label:nth-of-type(3) {margin-top:-50px;}
label.circle_label:nth-of-type(4) {margin-top:-25px;}
label.circle_label:nth-of-type(5) {margin-top:0px;}
label.circle_label:nth-of-type(6) {margin-top:25px;}
label.circle_label:nth-of-type(7) {margin-top:50px;}
label.circle_label:nth-of-type(8) {margin-top:75px;}
label.circle_label:nth-of-type(9) {margin-top:100px;}


@media screen and (max-width:1240px) {

	.p_nav { width:5%;}
	.p_content { width:95%;}
	
	.p_content .fullscreenimage { width:95%;}
	
	label.circle_label { left:3.5%;}
	
	.p_content .container { width:90%; margin:24px 2.5%;}
	.p_content .teaserimage {
		width:100%;
		position:relative;
		height:440px;
		margin:0;
		float:left;
	}
	
	.wrap_sorglospaket { max-width:492px;}

	.p_content .container.right { float:left;}
	.p_content .container.left { float:left;}
	
	.p_content #screen-01 .intro_text {width:62%;}
	.p_content #screen-01 {min-height:620px;}
	
	.p_content #screen-05 .text { padding-bottom:60px; float:left;}

}

@media screen and (max-width:980px) {
	
	h1 { font-size:3.0em; }
	h2 { font-size:1.8em; }
	h3 { font-size:1.4em; }
	h4 { font-size:1.2em; }
	
	.stoerer { transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);}
	
	.logo {
		width:120px;
		position:absolute;
		top:20px;
		left:50%;
		margin:0 0 0 -60px;
		z-index:100;
	}
	
	
	#nav > a { display:block;}
	#nav:target > a:nth-of-type(1) { display:none;}
	#nav:not(:target) > a:nth-of-type(2) { display:none;}
	
	#nav .mobilenav_icon {
		width:30px;
		height:30px;
		position:absolute;
		left:20px;
		top:20px;
		z-index:140;
	}
	
	#nav:target >.container {display:block;}
	#nav:not(:target) >.container {display:none;}
	
	#nav > .container {
		width:100%;
		margin:0;
		position:absolute;
		z-index:120;
		padding:100px 0;
		top:0;
		left:0;
		background-color:rgba(0,0,0,1);
		text-align:center;
	}
	
	#nav label.navitem {
		width:100%;
		padding:26px 0;
		font-size:2.0em;
		text-decoration:underline;
		font-family:'univers_light_con';
		text-transform:uppercase;
		color:rgba(255,255,255,1);
	}
	
	#nav label.navitem:hover { cursor:pointer; text-decoration:none;} 
	
	#nav > .container label.navitem.left { float:left;}
	#nav > .container label.navitem.right { float:right;}
	
	#nav .navitem.exclusive {
		position:absolute;
		width:auto !important;
		font-size:0.9em;
		top:30px;
		right:20px;
		padding:0;
		color:rgba(98,178,47,1);
	}
	
	.p_content > #privat.ref > .projekts { width:80%; padding-top:20px;}
	.p_content > .ref > .projekts { width:80%; float:left; margin:20px 0 0 0;}
	
	.p_content #screen-01 {background-position:43% 50%;}
	
	.p_content #screen-01 .top_headline h1 { font-size:5.8em; line-height:0.8em}
	.p_content #screen-01 .top_headline h2 { font-size:4.0em; letter-spacing:0.03em;}
	.p_content #screen-01 .top_headline h3 { font-size:2.0em;}
	
	.p_content #screen-01 .intro_text { font-size:1.2em;}
	
	.slide_top img, .slide_bottom img{ margin-left:-0.8%;}

}

@media screen and (max-width:720px) {
	
	.wrap_page {
		width: 97%;
		margin:80px 1.5% 0 1.5%;
		bottom:32px;
	}
	
	.wrap_page:before { top:80px;}
	
	.p_nav { display:none;}
	.p_content { width:100%; float:left;}
	.p_content .fullscreenimage { width: 100%;}
	
	label.circle_label { 
		width:10px; 
		height:10px; 
		background-color:rgba(200,200,200,1);
		position:absolute;
		left:50%;
		top:auto;
		bottom:10px;
		z-index:100;
		
	}
	label.circle_label:hover { cursor:pointer;}
	
	label.circle_label:nth-of-type(1) {margin-left:-100px;}
	label.circle_label:nth-of-type(2) {margin-left:-75px;}
	label.circle_label:nth-of-type(3) {margin-left:-50px;}
	label.circle_label:nth-of-type(4) {margin-left:-25px;}
	label.circle_label:nth-of-type(5) {margin-left:0px;}
	label.circle_label:nth-of-type(6) {margin-left:25px;}
	label.circle_label:nth-of-type(7) {margin-left:50px;}
	label.circle_label:nth-of-type(8) {margin-left:75px;}
	label.circle_label:nth-of-type(9) {margin-left:100px;}
	
	.p_content #screen-01 {background-position:50% 50%; min-height:520px;}
	
	.p_content #screen-01 .top_headline { margin:80px 5% 20px 5%; width:90%;}
	
	.p_content #screen-01 .top_headline h1 { font-size:3.2em; line-height:0.8em}
	.p_content #screen-01 .top_headline h2 { font-size:2.0em; letter-spacing:0.03em;}
	.p_content #screen-01 .top_headline h3 { font-size:1.6em;}
	
	.p_content #screen-01 .intro_text { width:90%; margin:0 5%; font-size:1.2em;}
	
	.p_content #screen-02 .text { width:80%; margin:40px 10%;}
	
	.left_col, .right_col { width:100% !important; float:left !important;}
	
	.p_content #screen-05 .text { padding:0;}
	.p_content #screen-05 .right_col .image {width:100%; margin:10px 0 80px 0;}
	
	.p_content #screen-07 h2,
	.p_content #screen-07 .text { width:80%; margin-left:10%; margin-right:10%;}
	
}

@media screen and (max-width:540px) {
	
	h1 { font-size:2.0em; }
	h2 { font-size:1.4em; }
	h3 { font-size:1.2em; }
	h4 { font-size:1.2em; }
	
	.p_content .claim {margin: 20px 5% 0 5%;}
	
	.stoerer { display:none;}
	
	.notification {
		width:200px;
		padding:10px;
		bottom:40px;
	}
	
	.p_content .container { 
		width:95%;
		margin:10px 0 0 5%;
		padding:0;
		float:left;
	}
	
	.p_content .teaserimage {height:220px;}
	.p_content .teaserimage > .claim { display:none;}
	
	.wrap_sorglospaket {
		width:100%;
		margin:0 0 20px 0 ;
	}
	
	.p_content > .ref > .portraits { width:50px;}
	.p_content > .ref > .portraits > label.person {width:50px; height:50px;}
	.p_content > #privat.ref > .portraits { width:50px;}
	
	.p_content > .ref > .projekts .image,
	.p_content > .ref > .projekts .description {width:95%; margin:0 0 0 5%; float:left;}
	.p_content > .ref > .projekts .description {padding-top:20px;}	
	.p_content > #privat.ref > .projekts p,
	.p_content > #privat.ref > .projekts span,
	.p_content > #privat.ref > .projekts small{width:80%; margin:0 10%; float:left;}
	
	.jobitem {
		width:95%;
		margin:25px 5% 20px 0;
	}
	
	.contact .maps {
		width:100%;
		float:left;
		margin:0 0 20px 0; 
		max-height:200px;
		overflow:hidden;
	}
	
	.contact .adress {
		width:100%;
		text-align:right;
	}
	
	.contact .adress > h3 { width:100%; float:left; text-align:right;}
	
	.progress {
		width:100%;
		margin:40px 0 0 0;
		left:0;
	}
	
}