/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 17.10.2015, 15:38:04
    Author     : Alex
*/

body{
    background-color: #412b51;
   
    font-family: "Raleway",sans-serif;
    /*font-family: Roboto,Arial,sans-serif;*/
    font-size: 16px;
    font-weight: 300;
    overflow-x: hidden;
    
}

     
      
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway",sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0 0 20px;
}


p {
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 20px;
}

ul.datenschutz{
  list-style: none;  
  margin-left: 0.6em; padding-left: 0.6em;
}

li{
text-align: left;
font-size: 14px;
font-weight: 200;
color: #ffffff;
}
.header-logo{

}

#home {
    display: table;
    height: 100%;
    width: 100%;
}


.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand{
    margin-left: -25px;
}


.navbar{
    opacity: 0.95;
    margin: 0;
    padding: 0;
}
.navbar-header{
   padding-left: 20px; 
}
a.navbar-brand{
    padding: 0px 5px;
    text-transform:uppercase;
    
    font-weight: 400;
    opacity: 1;
}
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover{
    color:#412b51;
    color:  #ab99b3;
}

.navbar-default .navbar-brand {
    color:#7c6487;
     
}

.navbar-default .navbar-nav > li > a{
     color:#7c6487;
    
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover{
    color:  #ab99b3;
}

.navbar-collapse ul li{
    
    padding-left: 20px;
} 
header .nav a{
    padding:10px 0px;
    font-size:16px;
    line-height:30px;
    font-weight:400;
    letter-spacing:0.01em;
    text-transform:uppercase;
    background:transparent;
}

.noscroll{
    overflow: hidden;
    
}

.navbar-right{
    margin-right: 10px;
}

.top-padding{
    padding-top: 80px;
}
.salon-pano {
    frameborder:0;
    width: 100%;
    background-color: #ffffff;
    
}

.scroll-button {
    animation: 2s ease-out 0s normal none infinite running moving;
    bottom: 30px;
    color: #fff !important;
    font-size: 48px;
    left: 50%;
    margin-left: -35px;
    padding: 20px;
    position: absolute;
}

/*.trennung {
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
      }*/
      .trennung {
        -ms-hyphens: manual;
        -moz-hyphens: manual;
        -webkit-hyphens: manual;
        hyphens: manual;
      }
      


#start .carousel{
   height: 400px;
   margin-top: 20px;
    margin-bottom: 0px;
    
}



 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }




.carousel .item{
    height: 400px;
}

.carousel-caption{
    padding-bottom: 20px;
}


.caroussel-img{

    margin-left: auto;
    margin-right: auto;
}


.carousel-text{
    margin-bottom: 30px;
}

.lang-btn { 
  color: #412B51; 
  background-color: #D0AFE9; 
  border-color: #8C5CAE; 
} 
 
.lang-btn:hover, 
.lang-btn:focus, 
.lang-btn:active, 
.lang-btn.active, 
.open .dropdown-toggle.lang-btn { 
  color: #412B51; 
  background-color: #8C5CAE; 
  border-color: #8C5CAE; 
} 
 
.lang-btn:active, 
.lang-btn.active, 
.open .dropdown-toggle.lang-btn { 
  background-image: none; 
} 
 
.lang-btn.disabled, 
.lang-btn[disabled], 
fieldset[disabled] .lang-btn, 
.lang-btn.disabled:hover, 
.lang-btn[disabled]:hover, 
fieldset[disabled] .lang-btn:hover, 
.lang-btn.disabled:focus, 
.lang-btn[disabled]:focus, 
fieldset[disabled] .lang-btn:focus, 
.lang-btn.disabled:active, 
.lang-btn[disabled]:active, 
fieldset[disabled] .lang-btn:active, 
.lang-btn.disabled.active, 
.lang-btn[disabled].active, 
fieldset[disabled] .lang-btn.active { 
  background-color: #D0AFE9; 
  border-color: #8C5CAE; 
} 
 
.lang-btn .badge { 
  color: #D0AFE9; 
  background-color: #412B51; 
}

.artikel .row{
    padding-bottom: 40px;
    padding-top: 70px;
    background-color: #ffffff;
  
}

.salonpano .row {
    background-color: #ffffff;
   padding-bottom: 60px;
} 

.team-marketing .row{
    padding-bottom: 60px;
}

.marketing .item,
.team-marketing .item,
.kontakt-marketing .item,
.kontakt-marketing .item-hover{
    margin-top: 50px;
}
/*.marketing,
.team-marketing,
.kontakt-marketing{
    padding-bottom: 20px;
    padding-top: 20px;
}
*/
.marketing h2{
   
    font-size: 50px;
}

.marketing h3{
    color:#ffffff;
    font-size: 40px;
    font-weight: 400;
}



.team-marketing h2{
   color:#ffffff;
    font-size: 50px;
    font-weight: 200;
}


.kontakt-marketing h2{
   color:#ffffff;
   text-align: center;
    font-size: 50px;
  font-weight: 200;
}


.kontakt-marketing h3,
.team-marketing h3{
   
    font-size: 28px;
    color: #ffffff;
}
.team-marketing h4{
     font-size: 25px;
    color: #d0afe9;/*#ae75d7;*/
}


.kontakt-marketing p{
     font-size: 25px;
     line-height: 28px;
    color: #ffffff;
    font-weight: 300;
}


.team-marketing p{
    font-size: 22px;
    color: #ffffff;
}


.salonpano h2{
    
    font-size: 50px;
}

.marketing h2.menu-punkt,
.salonpano h2.menu-punkt,
.service h2.menu-punkt,
.team-marketin  h2.menu-punkt,
.konatkt-marketing h2.menu-punkt{
    font-weight: 200;
}
.impress p {
    text-align: left;
    font-size: 16px;
    font-weight: 200;
    color: #ffffff;
}
.impress h4{
    color: #ffffff;
}

.marketing p{
   font-size: 22px;
   font-weight: 400;
}

.marketing h2, .marketing p {
    color: #ffffff;
}
.salonpano h2{
    color: #412b51;
}


.mode h2{
     font-size: 50px;
     font-weight: 400;
}

.impress p {
    text-align: left;
    font-size: 14px;
    font-weight: 200;
    color: #ffffff;
}

.impress h2{
     color: #ffffff;
     text-align: center;
     font-size: 50px;
     font-weight: 200;
}


.marketing .icon,
.team-marketing .icon,
.mode .icon{
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    color: #412b51;
    font-size: 48px;
    height: 150px;
    line-height: 150px;
    margin: 0 auto 40px;
    position: relative;
    text-align: center;
    transition: all 0.3s ease-out 0s;
    width: 150px;
}


.kontakt-marketing .icon{
   background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    color: #412b51;
    
    font-size: 58px;
    height: 150px;
    line-height: 150px;
    margin: 0 auto 40px;
    position: relative;
    text-align: center;
    transition: all 0.3s ease-out 0s;
    width: 150px;
}




.team-box{
    border-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 25px;
}

.teamrow{
    margin-left: 20px;
    margin-right: 20px;
}

/*
.marketing .item:hover .icon {
    background: #8c5cae none repeat scroll 0 0;
    border: 1px solid #8c5cae;
    color: #412b51;
}
.marketing .item:hover [class*="fa"] {
    transform: scale(1.2);
    transition: all 0.3s ease-out 0s;
}
*/
#service{

 width: 100%;
        min-height: 500px;
        position: relative;
        z-index: 0;
        background: rgba(65, 43, 81, 0.5) url(../images/service.jpg) no-repeat center center fixed ;
        
	/*	object-fit:cover;
		object-position: center top;*/
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
       

}

  
#neu{
    width: 100%;
   background-color: #ffffff;
    text-align: center;
}
    .mode .icon {
        background: #412b51 none repeat scroll 0 0;
        border: 1px solid #412b51;
        color: #ffffff;
    }

#salon{
    width: 100%;
   background-color: #ffffff;
    text-align: center;
}
#team{
    width: 100%;
  
    text-align: center;
}

#kontakt{

width: 100%;
  
    text-align: center;
        min-height: 500px;
        position: relative;
        z-index: 0;
        background: rgba(65, 43, 81, 0.5) url(../images/kontakt.jpg) no-repeat center center fixed ;
        
	/*	object-fit:cover;
		object-position: center top;*/
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
       

}



.kontakt-box{
    border-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 25px;
}

.kontaktrow{
    margin-left: 20px;
    margin-right: 20px;
}

.formrow{
   /* margin-left: 60px;
    margin-right: 60px;*/
}


a.textlink:link, a.textlink:visited, a.textlink:active{
   
     color: #d0afe9; 
     text-decoration: none;
}
a.textlink:hover{
    color: #8c5cae; 
     text-decoration: none;
}


a.iconlink:link,a.iconlink:hover,a.iconlink:active,
.fa-map-marker{
    color: #412b51;
}






.kontakt-marketing .item-hover:hover .icon {
    background: #8c5cae none repeat scroll 0 0;
    border: 1px solid #8c5cae;
    color: #412b51;
}
.kontakt-marketing .item-hover:hover [class*="fa"] {
    transform: scale(1.2);
    transition: all 0.3s ease-out 0s;
}

#kontakt-form .form-control {
    background: #412b51 none repeat scroll 0 0;
    border-color: #ffffff;
    border-radius: 5px;
    color: #fff;
    display: inline;
    font-weight: 300;
    height: 52px;
    outline: medium none;
}

#kontakt-form textarea.form-control {
    height: auto;
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
}




footer p {
    color: #ffffff;
    text-align: center;
    
}
.form-control::-moz-placeholder {
    color: #d0afe9;
    opacity: 1;
}
.responsive-video {
        z-index:0;
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
         background-color: #412b51;
         text-align: center;
}

.responsive-video iframe,  
.responsive-video object,
.responsive-video embed {
	position: absolute;
        z-index: 0;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
      

}


.platzhalter{
    height: 30px;
    
}

.text-muted{color: #6c4787;}


@-webkit-keyframes moving {
    0% 		{ bottom: 30px; }
    30% 	{ bottom: 10px; }
    60% 	{ bottom: 30px; }
}

@keyframes moving {
    0% 		{ bottom: 30px; }
    30% 	{ bottom: 10px; }
    60% 	{ bottom: 30px; }
}

/*


@media screen and (orientation: portrait) {
     body { background-color: white; }
   }
   @media screen and (orientation: landscape) {
     body { background-color: black; }
   }


@media screen  and (max-width: 32px){
    
    .h1, h1{
        font-size: 20px;
    }
    
    
}*/



              
              
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      
      
    #service, #team{
                  background-image: none;
                  background-color: #ffffff;
    }
    
    .marketing h2, .marketing h3, .marketing p,
    .team-marketing h2, .team-marketing h3, .team-marketing h4, .team-marketing p{ color:#412b51; }
     
    .team-marketing h4{
        font-style: italic;
    }
    
    .marketing .icon {
        background: #412b51 none repeat scroll 0 0;
        border: 1px solid #412b51;
        color: #ffffff;
    }
    
    .team-box{
    border-color: #412b51;
    
    }
    
    #salon{ background-color: #412b51; }
    .salonpano h2{ color: #ffffff; }
    .salonpano .row { background-color: #412b51; } 
    
    #kontakt{
                  background-image: none;
                  background-color: #412b51;

                  }
      
    #impressum{
                   
         background-image: none;
                  background-color: #ffffff;
                  }
                  
                  
     .impress h2, .impress p{ color: #412b51;}

     .carousel-caption .pwithimg{
        margin-bottom: -30px;
     }
     
 /*     .carousel-caption p{
        margin-bottom: 30px;
     }
  */   
}              
              
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  
      
      .navbar-collapse{
                   
                     min-height: 700px; 
                  }       
                  
      .carousel-caption .pwithimg, .carousel-caption p {
        margin-bottom: 50px;
      }
                 
} 


/*@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 
    .carousel-caption .pwithimg, .carousel-caption p {
        margin-bottom: 50px;
      }
}*/





          

@media screen and (min-device-width:320px)
              and (orientation: portrait) {
    .carousel-text{
        margin-bottom: 30px;
    }
    .caroussel-img{
         margin-bottom: 75px;
    }

}

  
@media only screen and
(min-device-width:321px)
{
   .carousel-text{
        margin-bottom: 40px;
    }

}