@charset "utf-8";

/*
* CSS-Design
* Madeo-Smit-Webseite
* Friseursalon Madeo-Smit
*/



/* Reset * * * * * * * * */
*{
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}

html{
        font-size: 100%; /* Browserstandard: 16px */
}

img{
max-width: 100%;
}


/* Layout * * * * * * * * */

body{
font-family:
line-height: 1.5;
background: white;
}


.wrapper{
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}

header{
padding: 50px 0 20 0;
text-align: center;
width: 73%;
height: 150px;
}


#main{
width: 73%;
float: left;
}

#main article{
text-align: center;
}

#banner{
height: 150px;
background: #e46197;
padding: 20px;
}

#bann{
height: 150px;
background: #e46197;
color: #fff;
padding: 20px;
}

.sidebar{
width: 25%;
padding: 25px;
float: right;
}

footer{
width: 73%;
text-align: center;
}


/* Schriften ***/
h1{
font-family: 'Open sans', Arial, Helvetica, sans serif;
font-weight: 700;
font-size: 34px;
line-height: 17px;
color: #000;
text-shadow: 1px 1px #9a9595;
margin: 0 0 10px 0;
text-align: center;
}

h2, h3{
font-family: 'Open sans', Arial, Helvetica, sans serif;
font-weight: 700;
line-height: 28px;
text-shadow: 1px 1px #9a9595;
margin: 0 0 10px 0;
text-align: center;
}

h4{
font-family: 'Sanvito Pro', Arial, Helvetica, sans serif;
font-weight: 700;
font-size: 48px;
line-height: 17px;
color: #fff;
text-shadow: 1px 1px #9a9595;
margin: 0 0 10px 0;
text-align: center;
}


p{
text-align: center;
line-height: 26px;
font-family: 'Open sans', Arial, Helvetica, sans serif;
margin: 0 0 10px 0;
}

p1{
line-height: 20px;
font-size: 12px;
font-family: 'Open sans', Arial, Helvetica, sans serif;
margin: 0 0 10px 0;
}

#impressum h2, h3, p, p1, p2{
font-family: 'Open sans', Arial, Helvetica, sans serif;
}


#impressum p1{
font-size: 13px;
}

#impressum p2{
font-size: 10px;
}

/* Trennstrich ***/
hr{
background-color: #e46197;
border: 0;
height: 1px;
width: 100%;
float: left;
margin: 20px 0;
}


a{
color: #746f6f;
text-decoration: none;
}

#footer a:hover{
color: #e46197;
}

#footer p{
font-size: 10px;
}

/* Button */

.btn{
        background: #008b45;
        padding: 6px 80px;
        color: #fff;
        text-decoration: none;
        font-size: 22px;
        text-shadow: 1px 1px #842e08;
        float: left;
}

.btn:hover{
        background: #e46197;
        color: #fff;
        text-shadow: none;
}

/* Media Queries * * * * * * * * */

@media only screen and (min-width: 980px) and (max-width: 1279px) {

}


@media only screen and (min-width: 760px) and (max-width: 979px) {
.wrapper{
width: 760px;}

#header{
text-align: center;
}

#main, .sidebar{
width: 100%;
}

h1{
font-size: 20px;
}
}


@media only screen and (max-width: 759px) {
.wrapper{
width: 100%;
}

#main, .sidebar{
width: 96%;
margin: 25px 2% !important;
}

#banner{
height: 160px;
padding: 5px;
}

h1{
font-size: 22px;
line-height: 28px;
}
}