/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body {
    height: 100%;
}
#header {
    height: 100%;
}

.contact-icon{
	position: absolute;
	padding: 10px;
	right: 10px;
	top: 0px;
}

#header .fa{
	color: #fff;
	padding: 10px 0px;
}

.header-background{
    height: 100%;
    background-position: center;
    background-size: cover;`
}
.main-navigation{
    background-color: #763ca4;
    bottom: 100px;
    position: absolute;
    width: 100%;
    text-align: center;
	z-index: 9999;
}

.main-navigation .logo{
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.main-navigation .logo a{
    font-family: Felipa;
    color: #fff;
    font-size: 3.000em;
    text-align: center;
    text-decoration: none;   
}
#header a:focus{
	color: #fff;
	text-decoration: none;
	background-color: #763ca4;
	border-color: #763ca4;
	outline:none;
}
.navbar{
    margin: 0 0 0 0;
	border: 0px none;
	min-height:auto;
}

ul, ol {
    margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.main-navigation .navbar li{
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 15px;
}

.main-navigation .navbar li a{
    color: #fff;
    font-family: Roboto;
    font-weight: 100;
    font-size: 1.000em;
    text-decoration: none;
    
}
.navbar-default {
	background-image: none;
	background-color: #763ca4;
    background-repeat: repeat-x;
	border: 0px;
    border-radius: 0px;
    box-shadow: none;
}

.navbar-default .navbar-toggle .icon-bar{
	background-color: #fff;
}

.navbar-toggle{
	margin-top: 6px;
	margin-right:25%;
	border: none;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: #763ca4;
}

.navbar-collapse{
	border: none;
	box-shadow: none;
}

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
	top: 0;
    z-index: 999999;
    border-top: 0;
	bottom: inherit;
}

#service {
    background-image: url(../img/background_pattern.jpg);
    background-repeat: repeat;
    padding: 70px 0;
}


h1, h2 {
    font-family: Roboto;
    font-weight: 100;
    font-size: 3.000em;
    text-align: center;
    margin: 0 0 0 0;
    padding: 0 0 0 0; 
    text-transform: uppercase;
}

.service-item{
    margin-top: 70px;
	padding: 0px 30px 0px 30px;
    display: inline-block;
    position: relative;
    width: 33%;
}

.service-img{
    width: 100%;
    position: relative;
}

.service-img img{
    border-radius: 50%;
    position: relative;
    width: 100%;
}

.service-hover{
	border-radius: 50%;
	position: relative;
	width: 100%;
	height: 100%;
	background: #763ca4;
}

.alignment{
	position: relative;
    top: 50%;
    left: 50%;
	padding: 0px 15px;
    transform: translateX(-50%) translateY(-50%);
	color: #fff;
	text-align: center;
}

.flip-container{
	perspective: 1000px;
	transform-style: preserve-3d;
}

.flip-container:hover .back{
		transform: rotateY(0deg);
		visibility: visible;
	}
.flip-container:hover .front{
	    transform: rotateY(180deg);
	}

.flipper{
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back{
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
}

.front{
	z-index: 2;
	transform: rotateY(0deg);
}

.back{
	transform: rotateY(-180deg);
	visibility: hidden;
}

.service-title{
    position: relative;
    width: 100%;
    padding: 15px;
    font-family: Roboto;
    font-weight: 300;
    font-size: 1.500em;
    text-align: center;
    text-transform: uppercase;
}

#potrait{
    padding: 70px 0;
}

.potrait-box{
    margin-top: 70px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    position: relative;
    overflow: hidden;
	height: 380px;
}

.potrait-box img{
    width: 100%;
}

.about{
    background-color: #e6e6e6;
    padding: 20px;   
    display:table;
}

.about p{
    display: table-cell; 
    vertical-align: middle;
    text-align: justify;
    font-family: roboto;
    font-weight: 400;
    font-size: 1.000em;
}

.usps{
    background: #763ca4;
}

.usps-item{
    color: #fff;
    font-family: roboto;
    font-weight: 300;
    font-size: 1.500em;
    text-transform: uppercase;
    text-align: center;
    height: 33%;
    margin: 0;
    padding: 50px;
}

#testimonials{
    background-image: url(../img/background-testimonials.jpg);
    height: auto;
    background-position: center;
    background-size: cover;
    padding: 70px 0;
    position: relative;
}

.quote-item{
    text-align: center;
    position: relative;
    padding: 0px 30px;
	margin-top: 30px;
}

#testimonials .fa{
    color: #979797;
    opacity: 0.5;
    padding: 50px 0 0 0;
}

.quote p{
    font-family: roboto;
    font-size: 1.500em;
    font-weight: 300;
}

.quote-subline{
    font-family: roboto;
    font-size: 1.000em;
    font-weight: 300;
    text-transform: uppercase;
}

.call-to-action{
    width: 100%;
    background-color: #763ca4;
    height: 50px;
    text-align: center;
    vertical-align: middle;
	margin: 0px;
	padding: 15px;
	border: 0px;
}

.call-to-action a{
	color: #fff;
	font-weight: 400;
    font-size: 1.125em;
    text-transform: uppercase; 
}

.call-to-action :hover{
   	font-weight: 700;
	text-decoration: none;
}

#img-gallery{
	padding: 70px 0px;
}

li .col-lg-2, .col-md-2, .col-sm-3, .col-xs-4{
   	margin: 0px;
    padding: 0px;
    position: relative;
	list-style: none;
}

.gallery-item img{
    max-width: 100%;
	height: auto;
}

#filter{
	margin-top: 20px;
	margin-bottom: 70px;
	text-align: center;
}

.filter-item{
	border: 1px;
	border-style: solid;
	border-color: #e6e6e6;
	padding: 10px;
	margin-top: 10px;
	margin-right: 15px;
	text-transform: uppercase;
	display: inline-block;
	color: #000000;
	font-family: roboto;
	font-weight: 300;
	font-size: 1.000em
	
}

#filter a:hover{
	color: #fff;
	text-decoration: none;
	background-color: #763ca4;
	border-color: #763ca4;
}

#filter a:focus{
	color: #fff;
	text-decoration: none;
	background-color: #763ca4;
	border-color: #763ca4;
	outline:none;
}

#filter a:active{
	color: #fff;
	text-decoration: none;
	background-color: #763ca4;
	border-color: #763ca4;
}

.active {
	color: #fff;
	text-decoration: none;
	background-color: #763ca4;
	border-color: #763ca4;
}

.modal{
   	z-index: 999999999999999;
}

.modal-content{
	background-color:#9b9b9b;
	border: 0px;
	border-radius: 0px;
}

.modal-body{
	padding: 3px;
}

.clear {
	clear: both;
	margin: 0px;
	padding:0px;
}

#kontakt{
	background-image: url(../img/background_pattern.jpg);
    background-repeat: repeat;
    padding-top: 70px;
	padding-bottom: 0px;
	height: auto;
}

.adresse h3{
	font-family: roboto;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.500em;
	margin-bottom: 30px;
}

.adresse{
	margin-top: 100px;
	height: 300px;
	position: relative;
}

.adresse p{
	font-family: roboto;
	font-weight: 300;
	font-size: 1.000em;
}

.kontakt-detail{
	margin-top: 30px;
}

.kontakt-detail a{
		color: #333;
	}
	
	.kontakt-detail a :hover{
		color: #333;
		font-weight: 700;
		text-decoration: none;
	}

.map{
	margin-top: 70px;
	height: 300px;
	position: relative;
}

.h-line{
	height: 2px;
	background: #9a9a9a;
	margin: 0px 0px 40px 0px;
}

#form{
	background-image: url(../img/background_pattern.jpg);
    background-repeat: repeat;
    padding-top: 0px;
	padding-bottom: 20px;
	height: auto;
}

.field{
	
	height: 50px;
	width: 100%;
	padding: 0 0 0 10px;
	border-bottom: 2px;
	border-bottom-style: solid;
	border-bottom-color: #e6e6e6;
}

select, input {
	border: none;
	margin: 0px 20px 20px 0px;	
}

.area{
	height: 190px;
	width: 100%;
	padding: 0 0 0 10px;
	border: 2px;
	border-style: solid;
	border-color: #e6e6e6;
	padding: 10px;
	margin: 0px 20px 20px 0px;	
}

.button{
 	width: 100%;
    background-color: #763ca4;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    display: table;
	color: #fff;
	font-weight: 400;
    font-size: 1.125em;
    text-transform: uppercase; 
	margin: 0px 20px 20px 0px;	
}

.button:hover{
    font-weight: 700;
}	

.fehler{
border: 5px;
border-style: solid;
border-color: red;	
}

#footer {
	height: 70px;
	background-color: #e6e6e6;
	margin: 0px;
	padding:0px;
	width: 100%;
}

#footer .row{
	margin: 0px;
}

#footer .col-lg-6{
	padding: 0px;
}
.copyright {
	font-weight: 100;
    font-size: 1.000em;
	padding-top: 25px;
}

#footer .fa {
	padding: 0 5px 0 0;
}
.fa-copyright {
	color: #333;
	opacity: 1;
}


.metalist li{
	list-style: none;
	text-align: right;
}
.metalist li a{
    color: #333;
    font-family: Roboto;
    font-weight: 100;
    font-size: 1.000em;
    text-decoration: none;
	display: inline-block;
    margin-left: 30px;
    margin-bottom: 10px;
	list-style: none;
	padding-top: 25px;
}

.nav-padding{
	padding-top: 120px;
}



/* Media Quries */


@media (max-width: 991px) {
	.potrait-box{
		height: 300px;
	}
	.usps{
		height:80px;
		margin: 0px;
		text-align: center;
	}
	.usps-item{
		padding: 20px;
		float: left;
		width: 33%;
		height: 100%;
	}
	
	#testimonials{
    padding: 80px 0 50px 0;
	}
	
	.quote-item .fa{
		padding-top:50px;
	}
	
	.slick-next {
    right: 0px;
	}
	.slick-prev {
    left: 0px;
	}
}

@media (max-width:767px){
	#header{
		height: auto;
	}
	#slides{
		display: none;
	
	}
	
	.contact-icon{
	padding: 10px;
	right: 40%;
	position: fixed;
	top: 73px;
	}
	
	.contact-icon div{
		float:left;
		padding: 0px 15px 10px 15px;
	}
	
	.main-navigation{
    top: 0px;
	bottom:inherit;
    position: fixed;   
	}
	
	.main-navigation .navbar li{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 10px;
	}
	
	.navbar-toggle{
		margin-top: 0px;
		margin-right: 35%;
	}
	
	#service {
    padding: 40px 0;
	}
	
 	h1, h2 {
    font-size: 2.000em;
	}
	
	.service-img img{
		visibility: hidden;
	}
	
	.back{
		transform:none;
		visibility: visible;
	}
	
	#potrait{
		padding: 40px;
	}
	.potrait-box{
		height: 200px;
		margin-top: 40px;
	}
	.usps{
		height:80px;
		margin: 0px;
		text-align: center;
		height: 100%;
	}
	.usps-item{
    font-size: 1.200em;
    padding: 15px;
	}
	
	#testimonials{
    padding: 40px 0;
	}
	
	.quote-item .fa{
		padding-top: 25px;
	}
	
	#img-gallery{
		padding: 40px 0 0 0;
	}
	
	#filter{
		margin-bottom: 40px;
	}
	
	.adresse p{
		float:left;
	}
	
	#kontakt {
		padding: 40px 0 0 0;
	}
	
	.adresse {
		margin-top:30px;
		height: 120px;
	}
	
	.kontakt-detail{
		margin-top: 0px;
		padding-left: 100px;
		padding-bottom: 30px;
	}
	
	.map {
		margin-top:0px;
	}
	
	.h-line{
		margin-top: 40px;
	}
		
	.copyright {
    font-size: 0.800em;
	}
	
	.metalist li a{
    font-size: 0.800em;
	}
}

@media (max-width: 624px){
	
	.main-navigation .navbar li{
    display: inherit;
    margin-right: 5px;
    margin-bottom: 10px;
	}
}

@media (max-width: 486px){
	.main-navigation .logo{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
	}

	.main-navigation .logo a{
    font-family: Felipa;
    color: #fff;
    font-size: 2.000em;
    text-align: center;
    text-decoration: none; 
	}
	
	.navbar-toggle{
		margin-right: 28%;
	}
	
	.contact-icon{
	padding: 10px;
	right: 36%;
	position: fixed;
	top: 49px;
	}
	
	.contact-icon div{
		float:left;
		padding: 0px 15px 10px 15px;
	}
	
	#service {
    padding: 30px 0;
	}
	
	#potrait{
		padding: 30px;
	}
	
	.potrait-box{
		margin-top:30px;
	}
	
	.usps{
		margin: 0px;
	}
	
	.usps-item{
		clear: both;
		width: 100%;
	}
	
	#testimonials{
    padding: 30px 0;
	}
	
	
	#img-gallery{
		padding: 30px 0 0 0;
	}
	
	#img-gallery h2{
		padding-bottom: 30px;
	}
	
	#filter{
		display: none;
	}
	
	#kontakt {
		padding: 30px 0 0 0;
	}
	
	.adresse p{
		padding-right: 20px;
	}
	
	.kontakt-detail{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.map{
		height: auto;
	}
	
	.h-line{
		margin-top: 30px;
	}
	
	.metalist li{
	float: left;
	}
	
	.metalist li a{
    margin-left: 10px;   
	}
	
	#testimonials .fa{
		padding: 0px;
	}
	
}