/* General config */
body {
  background-color: #f0f0f0;
  font-family: 'Lato', sans-serif;
  margin: 0; 
}


#wrapper {
  margin: 0px; }


/* Text config */

h1 { 
  font-size: 48px;
  font-weight: 700;
  color: #e30613;
  font-family: 'Dancing Script', cursive; 
  margin: 0;
  margin-left: 4%;
  padding-top: 100px;}


.spezi{
    padding-bottom: 60px;
  }


.spezi2{
    padding-top: 60px;
  }


#b1 h1{
  padding-top: 440px;
  margin-left: 0;}  

#b5 h1{
  padding-left: 0;
} 


h2 {
  font-size: 28px;
  font-weight: 400;
  color: #e30613;
  font-family: 'Dancing Script', cursive; 
  margin: 0;}


h3 {
  font-family: 'Lato', sans-serif;
  color: #e30613;
  font-size: 18px;
  font-weight: 300; }

#b4 h3{
  margin-left: 4%;
  font-size: 24px;
}

h4 {
  font-weight: 100;
  font-style: italic; }


p {
  font-family: 'Lato', sans-serif;
  color: #e30613;
  font-size: 12px;
  font-weight: 400;
  }


.textbox{
  overflow: hidden;
  max-height: 145px;
  max-width: 275px;
  background-color: rgba(255, 255, 255, 0.55);
  position: relative;
  margin-top: 20px;
  margin-left: 4%;
  padding: 10px;
  padding-top: -10px;
  border: solid 1px #e30613; 


}

.p1{
  margin-bottom:50px;
}


.maxsize{
  max-height: none;
}


.textbox:after {
  display: block;
  content: "";
  background-image: url(img/arrow.png);
  width: 14px;
  height: 13px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  } 

.maxsize.textbox:after {
 transform: rotate(180deg); 
  
}


a {
    color: #e30613;
    text-decoration: none;
    padding:10px; }


#nav {
    background-color: rgba(255, 255, 255, 0.55);
    color: #000;
    font-family: "Lato",sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 120px;
    margin: 0 auto;
    width: 100%;
    z-index: 1000;
    border-bottom: solid #f00 1px;
    position: fixed;
    text-transform: uppercase; }


#nav ul {
    height: 100%;
    margin: 0;
    margin-top: 25px;
    float: left;
    position: absolute;
    right: 4%;}


#nav ul li {
    display: inline;
    list-style: outside none none;
    margin-right: 20px; }


#nav ul li a:hover {
  background-color: #e30613;
  color: #fff;
  padding:10px; }


.active {
  background-color: #285c92;
  color: #fff;
  padding:10px; }



#logo {
background-image: url(img/logo_fachstudio_catherine.png);
background-size: 100% auto;
background-repeat: no-repeat;
height: 91px;
width: 372px;
float: left;
margin: 20px;
margin-left: 4%;}


/* Content backgrounds */
section {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 648px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    padding-bottom: 20px;
     }



/* Hintergrund Bilder */


#b1 {
  background-image: url("img/bg_1_nageldesign.jpg");
  text-align: center;
   }


#b2 {
  background-image: url("img/bg_2_ute_hellwage.jpg");

  }


#b3 {
  background-image: url("img/bg_3_nagelstudio.jpg");
  
}


#b4 {
  background-image: url("img/bg_4_nailforming.jpg");
  height: 1275px; }


#b5 {
  background-color:#fff; 
  padding-bottom: 40px;
  height: 1400px;}

.impress{
  width: 530px;
  max-height: 38px;
  max-width: none;
  margin-top: 30px;
  margin-left: 0;
}

.impress.maxsize {
  max-height:none;
}

main {
  float:left;
  margin-left:4%;
  width: 720px;
}

aside {
  width:310px;
  float: left;
  position: relative;

}

aside div {
  border:1px solid #e30613;
  padding: 20px;
  margin-top: 40px;
  margin-left: 50px;
  width: 250px;
}

aside div img {
  margin-right: 10px;
  margin-bottom: -7px;
}

aside div p a {
  padding: 0;
  margin: 0;
  border: 0;
}


#b4 img{
  margin-right: 20px;
  margin-bottom: 40px;
}

.pic1{
  margin-left: 53px;
}


/* Formular */

form {
  width: 510px;
  margin-top: 40px;
  float: left;
  border: 1px solid #e30613;
  padding: 20px;
  margin-bottom: 20px;
}


input,
textarea {
  display: block;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #e30613;
  border-radius: 2px;
  color: #e30613;
}

input {
  width: 215px;
  padding: 4px; }


textarea {
  width: 100%;
  font-family: Arial;
  font-size: 14px;
}


input[type='submit'] {
  width: initial;
  color: #fff;
  text-transform: uppercase;
  background-color: #e30613;
  border: 0;
  cursor: pointer;
  float:right;
  padding: 4px 25px;
}





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

h1, h2, h3, h4, h5 {
    width: 96%;
}

#nav ul{
  display: none;
}


#logo {
    height: 70px;
    margin: 30px 20px 20px 5%;
    width: 280px; 
  }

#hamburger {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1500;
}

.ham {
    cursor: pointer;
    height: 25px;
    position: relative;
    width: 35px;
}

.ham::before {
    border-bottom: 3px solid #e30613;
    border-top: 10px double #e30613;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 0.25em;
    width: 35px;
}

a {
    color: #e30613;
    font-weight: 400;
    text-decoration: none;
}

#hamnav {
    background-color: rgba(255, 255, 255, 0.9);
    font-family: "Lato",sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 100;
    height: 100%;
    line-height: 42px;
    position: fixed;
    text-decoration: none;
    width: 250px;
    z-index: 1000;
    right: 0%;
    text-transform: uppercase;
}


#hamnav ul {
    height: 100%;
    margin: 0;
    padding: 20px 0 20px 20px;
}
#hamnav ul li {
    color: #e30613;
    list-style: outside none none;
}
#hamnav ul li a:hover {
    background-color: #e30613;
    color: #fff;
}
#hamnav ul li a:active {
    background-color: #e30613;
    color: #fff;
}


#b1{
  background-position: 100% center;
}

#b2{
  background-position: 50% center;
}


#b3{
  background-position: 50% center;
}

#b4{
  background-position: 50% center;
  height: initial;
}

#b4 img{
height: 100%;
margin:0 auto;
}



aside {
  position: relative;
  width:310px;
  float: left;
  margin-top: 0px;
  margin-left: 0px;
}


form{
  width: 320px;
}


.impress{
  width: 340px;
}

 } 



 @media screen and (min-width: 325px) { 
    
    #b4 img{
    margin-left: 15%;
    }

    }   


 @media screen and (min-width: 400px) { 
    
    #b4 img{
    margin-left: 25%;
    }

    } 

  
   @media screen and (min-width: 500px) { 
    
    #b4 img{
    margin-left: 2%;
    margin-bottom: 2%;
    }

    } 


   @media screen and (min-width: 850px) { 
    
    #b4 img{
    margin-left: 4%;
    }

    }
   


  @media screen and (min-width: 1050px) { 

  form{
    width: 710px;
  }

  .impress{
    width: 730px;
  }

  
  #b4 img{
  margin-left: 9%;
  }

    #b4 h3{
    margin-left: 9%;
  }

  }



@media screen and (min-width: 1400px) { 

 section {
    width: 1280px;
  
     }


#nav ul {
  margin-right: 21%;
  }

#nav #logo{
  margin-left: 26%
}       

  }



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


form{
  width: 300px;}


.impress{
  width: 320px;}


#b4 img{
margin-left: 12%;
}


aside {
  margin-left: -47px;
  margin-top: 0px;
  }

aside div{
    width: 300px;
}

 }


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


form{
  width: 245px;}


.impress{
  width: 265px;}


#b4 img{
margin-left: 12%;
}


aside {
  margin-left: -47px;
  margin-top: 0px;
  }

aside div{
    width: 245px;
}

 }