// Styled lists
dl.floatList {
	dt, dd {
		display: inline-block;
		vertical-align: top;
	}

	dt {
		padding-right: .5rem;
		min-width: 40%;
	}

	dd {
		width: 60%;
	}
}

.unstyled {
	margin-bottom: 0;

	li {
		padding: 0;

		&:before {
			display: none;
		}
	}

	ul {
		margin: 0;
	}
}
.nojs{
	.header{
		background:url('../images/slideshow/lamellen.jpg') no-repeat bottom right /cover;
		@include breakpoint(large){
			background:url('../images/slideshow/lamellen.jpg') no-repeat bottom right /85% 100%;
		}
	}
	.slider{
		display:none;
	}
}
.page-wrap, .header {
	transform: none;
	@extend %animated-transform;
}
.page-wrap{
	overflow:hidden;
}
.index{
	header{
		background:url('../images/slideshow/rollos.jpg') no-repeat top center /cover;
		position: relative;
		width: 100%;
		min-height:rem(500px);

	.line{
		background:$light;
		padding:.5rem 0;
	}

	.claim{
		background:$primary;
		padding:4rem .875rem;
		position:absolute;
		top:4.5rem;
		left:0rem;
		z-index:10;
		display:block;
		width:100%;
		text-align: center;

		blockquote{
			color:$light;
			font-size:rem(18px);
			line-height:rem(25px);

			span{
				text-transform:uppercase;
				color:$alert;
				font-size:rem(22px);
				display:block;
			}
			@include breakpoint(tiny){
				font-size:rem(20px);
				line-height:rem(35px);
					span{
						font-size:rem(25px);
					}
			}
			@include breakpoint(small){
				font-size:rem(25px);
				line-height:rem(40px);
					span{
						font-size:rem(30px);
					}
			}
			@include breakpoint(medium){
				font-size:rem(39px);
				line-height:rem(60px);
					span{
						font-size:rem(50px);
					}
			}

		}
		.phone{
			background:$alert;
			color:$light;
			padding:1rem 2rem;
			position:absolute;
			bottom:-1.5rem;
			right:50%;
			width:100%;
			transform:translateX(50%);

			&:before{
				@extend %icon-phone;
				padding-right:.5rem;
				font-family:$icon-font;
			}
			@include breakpoint(large){
				width:auto;
				bottom:0;
				right:0;
				transform:none;
			}
		}
		@include breakpoint(tiny){
			padding:4rem;
		}
		@include breakpoint(large){
			padding:8rem 4rem;
			width:auto;
			top:4rem;
			left:4rem;
			text-align: left;
		}
	}
	@include breakpoint(large){
		background:$light;
		min-height:rem(760px);

		.line{
			display:none;
		}
	}
	}
}
// Header
.header {
	position: relative;
	width: 100%;
	min-height:0;

	.line{
		background:$light;
		padding:.5rem 0;
	}

	.claim{
		display:none;
	}
	@include breakpoint(large){
		background:$light;

		.line{
			display:none;
		}
	}
}

.branding {
	display: inline-block;

	img{
		max-width:100%;
	}

	@include breakpoint(large) {
		float: left;
	}
}

// Misc
.highlight {
	color: $secondary;
}

.btn {
	background: $alert;
	border: none;
	font-style:italic;
	color: $medium;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	line-height: 1rem;
	padding: 1rem 2rem;
	text-align: center;
	text-decoration: none;
	@extend %animation;

	&:hover, &:active, &:focus {
		background: $primary;
		color: $light;
	}

	*[class^="icon"] {
		margin-left: .5rem;
		vertical-align: middle;
	}
}

.googleMaps {
	border: none;
	height: em(350px);
	width: 100%;
}

.notification {
	padding: 1em;
	background: $alert;
	color: $light;
	font-size: 1.2em;
}
.fb-like{
	float:right;
	padding:1.25rem .5rem;
}
.fancy {
	position: relative;
	text-decoration: none;

	&:before {
		content: "";
		position: absolute;
		width: 0;
		top: 100%;
		left: 0;
		height: 1px;
		background: $primary;
		transition: 300ms all ease-in-out;
	}

	&:hover:before {
		width: 100%;
	}
}
.video{
	background:$light url('../images/video.png') no-repeat center center;
	padding:2rem;
	text-indent:rem(-9999px);
	display:block;
	position:absolute;
	bottom:0;
	display: none;
	@extend %animation;
	@include breakpoint (medium){
		display: block;
	}
	@include breakpoint(large){
		height: 8.167rem;
        left: -8.167rem;
        width: 8.167rem;
				
	}
	@include breakpoint(giant){
	width:rem(237px);
    height:rem(237px);
    left:rem(-237px);
	}

	&:hover{
		opacity:.8;
		}
}

.bigImage{
	&.right{
		background:url('../images/slideshow/rollos2.jpg') no-repeat top left /cover;
		position:relative;

		.rightText{
			background:$medium;
			padding:2rem .875rem;
			width:100%;

			@include breakpoint(large){
					position:absolute;
					bottom:0;
					width:80%;
					right:5%;
					padding:4rem;
					z-index:5;
				}
				@include breakpoint(giant){
					width:50%;
				}
		}
		@include breakpoint(medium){
			min-height:rem(715px);
		}
		@include breakpoint(large){
			background:url('../images/slideshow/rollos2.jpg') no-repeat top left /85% 100%;
		}
	}
	&.left{
		background:url('../images/slideshow/lamellen.jpg') no-repeat bottom right /cover;
		position:relative;
		.slider{
			display:none;
		}
		.leftText{
			background:$medium;
			padding:2rem .875rem;
			width:100%;
				&.dark{
					background:$primary;
					color:$light;
					position:relative;


					blockquote{
						padding:3rem 0;
						font-size:rem(18px);
						line-height:rem(30px);
						font-weight:300;
						text-align: center;

						span{
							text-transform: uppercase;
							color:$alert;
							display:block;
							font-size:rem(30px);
						}
					}

					.caption{
						color:$light;
						position:absolute;
						left:10.5rem;
						bottom:rem(-60px);
						display:none;
						z-index:20;
						font-style:italic;

						&:before{
							content:'';
							width:8rem;
							height:rem(1px);
							background:$light;
							left:-9.5rem;
							top:50%;
							position:absolute;
						}
						@include breakpoint(large){
							left:55%;
						}
					}
				}
				&.top{
					bottom:unset;
					top:0;
				}
				
			@include breakpoint(large){
					background:$light;
					width:80%;
					left:5%;
					position:absolute;
					bottom:0;
					padding:4rem;
					z-index:20;
					&.dark{
						blockquote{
							text-align: left;
							font-size:rem(30px);
							line-height:rem(70px);

							span{
								font-size:rem(70px);
							}
						}
					}
					.caption{
						display:block !important;
					}
				}
				@include breakpoint(giant){
					width:50%;
				}
		}
		@include breakpoint(medium){
			height:rem(715px);
			overflow:hidden;
		}
		@include breakpoint(large){
			background:url('../images/slideshow/lamellen.jpg') no-repeat bottom right /85% 100%;
			.slider{
				display:block;
				position:absolute;
				width:85%;
				top:0;
				right:0;
				z-index:10;

				img{
					min-width:100%;
					max-width:none;
					height:rem(715px);
				}
			}
		}
	}
	&.last{
		margin-bottom:6rem;

		.caption{
			color:$primary;
			position:absolute;
			top:rem(40px);
			left:9.5rem;
			font-style:italic;

			&:before{
				content:'';
				width:7rem;
				height:rem(1px);
				background:$secondary;
				left:-8.5rem;
				top:50%;
				position:absolute;
			}

			@include breakpoint(large){
				top:auto;
				left:9.5rem;
				bottom:rem(-60px);
				&:before{
					width:8rem;
					left:-9.5rem;
				}
			}
		}
		@include breakpoint(medium){
			margin-bottom:6rem;
		}
	}
	.row{
		min-height:rem(400px);
		position:relative;
		z-index:1;
		@include breakpoint(medium){
			min-height:rem(715px);
		}
	}
}
.aussenrolllaeden-wien{
	.bigImage{
		&.right{
			background:url('../images/slideshow/aussenrollo.jpg') no-repeat bottom left /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/aussenrollo.jpg') no-repeat bottom left /85% 100%;
			}
		}
		&.last{
			background:url('../images/slideshow/aussenrollo-detail.jpg') no-repeat bottom left /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/aussenrollo-detail.jpg') no-repeat bottom left /85% 100%;
			}
		}
	}
}
.insektenschutz-wien{
	.bigImage{
		&.right{
			background:url('../images/slideshow/fliegengitter.jpg') no-repeat bottom left /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/fliegengitter.jpg') no-repeat bottom left /85% 100%;
			}
		}
		&.left{
			background:url('../images/slideshow/insektenschutz.jpg') no-repeat bottom right /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/insektenschutz.jpg') no-repeat bottom right /85% 100%;
			}
		}
	}
}
.verdunklung-wien{
	.bigImage{
		&.right{
			background:url('../images/slideshow/lamellen.jpg') no-repeat bottom left /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/lamellen.jpg') no-repeat bottom left /85% 100%;
			}
		}
		&.left{
			background:url('../images/slideshow/rollos2.jpg') no-repeat bottom right /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/rollos2.jpg') no-repeat bottom right /85% 100%;
			}
		}
	}
}
.preise-insektenschutz-wien, .agb-aussenrolllaeden-wien, .kontakt, .datenschutzerklaerung, .impressum{
	.bigImage{
		&.right{
			background:url('../images/slideshow/fliegengitter.jpg') no-repeat bottom left /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/fliegengitter.jpg') no-repeat bottom left /85% 100%;
			}
		}
		&.last{
			background:url('../images/slideshow/rollos2.jpg') no-repeat bottom left /cover;
			@include breakpoint(large){
				background:url('../images/slideshow/rollos2.jpg') no-repeat bottom left /85% 100%;
			}
		}
	}
}
.content{
	.row{
		padding:4rem 0;
	}
}
footer{
	background:$medium;
	text-align:center;

	.first{
		padding:5rem 0;

		p{
			margin-bottom:0;

			&.logo{
				display:block;
				position:relative;
				padding-top:rem(80px);
				
				&:before{
					content:'';
					width:rem(73px);
					height:rem(47px);
					position: absolute;
					left:50%;
					transform:translateX(-50%);
					top:0;
					background:url('../images/logo.png') no-repeat top center;
				}
				@include breakpoint(large){
					padding-left:rem(90px);
					padding-top:0;

					&:before{
						left:0;
						top:0;
						transform:none;
					}
				}
			}
		}
	}

	.dark{
		background:$primary;
		padding:1rem 0;
		color:$light;

		.facebook{
			position:relative;
			padding-left:rem(35px);
			color:$light;
			@extend %animation;
			&:before{
				content:'';
				width:rem(25px);
				height:rem(26px);
				position:absolute;
				left:0;
				top:0;
				background:url('../images/facebook.png') no-repeat top center;
			}

			&:hover{
				color:$alert;
			}
		}
	}

	@include breakpoint(large){
		text-align: left;
	}
}

.yourRate{
	position:relative;
	text-align:center;
	    top: -3rem;
		@include breakpoint(large){
			text-align: left;
	position:fixed;
	display:block;
	height: 0;
	right:-340px;
	top:45%;
	z-index:200;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	    }
		.yourRateLogo{
			width:auto;
			margin-bottom: 1rem;
			a{
				width:110px;
			}
			img{
				width: auto;
				height:auto;
				margin-bottom:.5rem;

				@include breakpoint(large){
					width: 100%;
				}
			}
			@include breakpoint(large){
				display:block;
				float: left;
				width:90px;
				text-align:center;
			}
		}
		.yourRateContent{
			margin-bottom: 2rem;
			@include breakpoint(large){
			margin-bottom: 0px;
			width:340px;
			float:left;
		}
		}
		@include breakpoint(large){
			&:hover{
				right:5px;
			}
		}
	}



	.checkbox {
		float: right !important;
		width: calc(100% - 2rem) !important;
	}