/******** Setup ********************************************************************************/
/***********************************************************************************************/

*, *:before, *:after {
    margin:0;
    padding:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
html {
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}
img, header, nav, section, aside, article, footer {
    display:block;
}
body {
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#333e43;
    font-size:16px;
    line-height:22px;
    background:#ffffff;
     overflow-y:scroll;
}
a, a:active, a:hover {
    outline:0;
    text-decoration:none;
}
ul, li {
    list-style:none;
}

ol{
  margin-bottom: 20px;
}


/******** Hide *********************************************************************************/

.min-480 {
    display:none;
}
.min-768 {
    display:none;
}
.min-1024 {
    display:none;
}
.max-1024 {
    display:block;
}

/******** Fonts / Icons ************************************************************************/
/***********************************************************************************************/

@font-face {
    font-family: 'icon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon-plus,
.icon-cross,
.icon-list {
    font-family: 'icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-plus:before     {content: "\e601";}
.icon-cross:before    {content: "\e600";}
.icon-list:before     {content: "\e603";}


/******** Text *********************************************************************************/
/***********************************************************************************************/

h1, h2, h3 {
    font-weight:normal;
    line-height:1.1;
    margin-bottom:20px;
}
h1 { font-size:44px; }
h2 { font-size:24px; }
h3 { font-size:20px; }
p {
    margin-bottom:20px;
}

/******** Buttons / Links **********************************************************************/
/***********************************************************************************************/

/******** Links ********************************************************************************/

a {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
#content-main a {
    color:#ffffff;
}

/******** Container ****************************************************************************/
/***********************************************************************************************/

#bg {
    position:fixed;
    top:210px;
    left:0;
    min-width:1440px;
    min-height:800px;
    width:100%;
    height:auto;
    z-index:1;
}
#page-wrapper {
    width:100%;
    overflow:hidden;
}

/******** Content ******************************************************************************/

#content-wrapper:before {
    content:" ";
    position:absolute;
    z-index:-1;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    border-right: 1px solid #a9c0b1;
    background:#8eac99;
}
#content-wrapper {
    width:100%;
    float:left;
    position:relative;
    z-index:1;
}
#content {
    width:100%;
    float:left;
    position:relative;
    z-index:2;
}
#content-main {
    width:100%;
    float:left;
    color:#ffffff;
    padding:90px 20px 40px 20px;
    background:rgba(166, 156, 134, 0.95);
}
#content-main ul li {
    list-style-type:disc;
    margin-left:18px;
}
#content-main ul  {
    margin-bottom:30px;
}

/******** Header *******************************************************************************/

header {
    width:100%;
    background:#ffffff;
    z-index:5;
}
#header-wrapper {
    width:100%;
    position:relative;
    height:160px;
}
#logo {
    position:absolute;
    top:25px;
    left:20px;
    display:block;
    height:110px;
    width:135px;
    background:transparent url("../images/koerperhandwerk.png") no-repeat top left;
}
#logo span {
    display:none;
}

/******** Footer *******************************************************************************/

footer {
    width:100%;
    position:relative;
    float:left;
    padding:20px;
    color:#ffffff;
    font-size:12px;
    z-index:5;
    background:#ffffff;
}
.active-nav footer  {
    clear:both;
}
#footer-row {
    width:100%;
    float:left;
    margin-bottom:5px;
    padding-bottom:13px;
    background:transparent url("../images/bg-line.png") no-repeat bottom left;
}
#footer-wrapper {
    width:100%;
}
#signature {
    float:left;
    display:block;
    margin-bottom:15px;
    height:45px;
    width:100px;
    background:transparent url("../images/daniela.png") no-repeat top left;
}
#contacts  {
    float:left;
    width:100%;
    color:#4c3832;
}
#contacts a  {
    color:#4c3832;
}
#info  {
    float:left;
    width:100%;
    color:#b8ae95;
}
#info a  {
    color:#b8ae95;
}


/******** Menu *********************************************************************************/
/***********************************************************************************************/

/******** Menu Main ****************************************************************************/

#menu-main-wrapper {
    width:100%;
}
#menu-main {
    width:100%;
    margin-left:-100%;
    float:left;
    z-index:2;
}
#menu-main li {
    display:block;
    position:relative;
}
#menu-main ul ul {
    display:none;
}
#menu-main ul ul.toggle-active,
#menu-main ul ul.toggle-active ul {
    display:block;
}
#menu-main a {
    display:block;
    position:relative;
    border-bottom: 1px solid #a9c0b1;
    border-right: 1px solid #a9c0b1;
    text-decoration:none;
    height:50px;
    line-height:50px;
    color:#ffffff;
    padding-left:20px;
}
#menu-main .level1 > a {
    font-size:16px;
    text-transform:uppercase;
    background:#8eac99;
}
#menu-main .level2 > a {
    font-size:14px;
    padding-left:30px;
    background:#8eac99;
}
#menu-main a.active,
#menu-main a:hover {
    color:#e0e9e3;
    text-decoration:none;
}
#menu-main .toggle-btn {
    position:absolute;
    cursor:pointer;
    top:0;
    right:0;
    height:49px;
    padding:14px 14px 0 14px;
    color:#ffffff;
    border-right: 1px solid #a9c0b1;
    background:#8eac99;
}
#menu-main .toggle-btn.toggle-active {
    text-decoration:none;
}
#menu-main .level2 .toggle-btn {
    display:none;
}
#menu-main .toggle-btn:before {
    font-family:'icon';
    content: "\e601";
    font-size:18px;
}
#menu-main .toggle-btn.toggle-active:before {
    font-family:'icon';
    content: "\e600";
}

/******** Menu Main Toggle *********************************************************************/

#menu-toggle {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50px;
    border-bottom: 1px solid #ffffff;
    background:#eeede6;
    z-index:100;
}
#menu-btn {
    display:block;
    float:left;
    height:50px;
    padding:12px 12px 0 12px;
    color:#ffffff;
    text-decoration:none;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    background:#eeede6;
}
#menu-btn span {
    color:#a4917e;
    font-size:25px;
}
#menu-btn.active {
    background:#8eac99;
    border-bottom: 1px solid #a9c0b1;
    border-right: 1px solid #a9c0b1;
}
#menu-btn.active span {
    color:#ffffff;
}
.active-nav #menu-main {
    margin-left:0;
    width:70%;
}
.active-nav #content-wrapper  {
    margin-right:-100%;
}
#menu-main, #content-wrapper {
    display:block;
    position:relative;
}
.small-screen #menu-main, .small-screen #content-wrapper {
    -webkit-transition: .1s all ease;
    -moz-transition: .1s all ease;
    -o-transition: .1s all ease;
    -ms-transition: .1s all ease;
    transition: .1s all ease;
}
.normal-screen #menu-main, .normal-screen #content-wrapper {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}


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

/******** min 480 ******************************************************************************/
/***********************************************************************************************/

@media all and (min-width: 480px) {

/******** Hides ********************************************************************************/

.min-480 {
    display:block !important;
}

}

/******** min 640 ******************************************************************************/
/***********************************************************************************************/

@media all and (min-width: 640px) {

}

/******** min 768 ******************************************************************************/
/***********************************************************************************************/

@media all and (min-width: 768px) {

/******** Quote ********************************************************************************/

#quote {
    position:absolute;
    top:35px;
    right:20px;
}
#butterfly {
    float:right;
    display:block;
    height:45px;
    width:45px;
    background:transparent url("../images/butterfly.png") no-repeat top right;
}
#butterfly-quote {
    display:none;
    float:right;
    margin-right:20px;
    line-height:45px;
    color:#4c3832;
}
#quote:hover #butterfly {
    background:transparent url("../images/butterfly.png") no-repeat bottom right;
}
#quote:hover #butterfly-quote {
    display:block;
}

/******** Hides ********************************************************************************/

.min-768 {
    display:block;
}

/******** Menu Main ****************************************************************************/

.active-nav #menu-main {
    margin-left:0;
    width:50%;
}

/******** Content ******************************************************************************/

#content-main {
    padding:90px 200px 60px 40px;
    background:rgba(166, 156, 134, 0.90) url("../images/bg-flower.png") no-repeat top right;
}

/******** Footer *******************************************************************************/

#footer-row {
    padding-bottom:0;
}
#contacts {
    float:left;
    width:auto;
    margin-top:29px;
}
#info {
    float:right;
    width:auto;
}
#contacts li, #info li {
    float:left;
    margin-right:0;
    margin-left:10px;
}

}

/******** min 1024 *****************************************************************************/
/***********************************************************************************************/

@media all and (min-width: 1024px) {

/******** Hides ********************************************************************************/

.min-1024 {
    display:block !important;
}
.max-1024 {
    display:none !important;
}

/******** Content Toggle ***********************************************************************/

#content-toggle {
    position:absolute;
    top:0;
    right:0;
}
#content-toggle-btn {
    display:block;
    cursor:pointer;
    height:50px;
    font-size:20px;
    padding:14px 13px 0 13px;
    color:#ffffff;
    text-decoration:none;
    border-bottom: 1px solid #d3cebf;
    border-left: 1px solid #d3cebf;
    background:rgba(166, 156, 134, 0.50);
}
#content-toggle-btn:hover {
    background:rgba(166, 156, 134, 0.70);
}
#content-toggle-btn:before {
    font-family:'icon';
    content: "\e600";
}
#content-toggle-btn.active:before {
    font-family:'icon';
    content: "\e601";
}
#content-toggle-btn.active {
    border-bottom:0;
    border-left:0;
}

/******** Content ******************************************************************************/

#content-wrapper {
    margin-top:210px;
    min-height:665px;
}
#content {
    float:none;
    margin:0 auto;
    max-width:980px;
}
#content-main {
    padding:40px 200px 60px 40px;
    margin-bottom:200px;
    float:right;
    width:760px;
}
#content-main.map {
    padding:40px 0 0 0;
    margin-bottom:200px;
    float:right;
    width:760px;
}
#content-main.map h1, #content-main.map p {
    margin-left:40px;
}


/******** Header *******************************************************************************/

header {
    position:fixed;
    top:0;
    left:0;
}
#header-wrapper {
    width:980px;
    margin:0 auto;
}
#logo {
    left:0;
}
#quote {
    right:0;
}

/******** Menu Main ****************************************************************************/

#menu-main-wrapper {
    height:50px;
    background:#eeede6;
    border-bottom:1px solid #ffffff;
}
#menu-wrapper {
    width:980px;
    margin:0 auto;
}
#menu-main {
    width:760px;
    float:right;
    margin:0;
}
#menu-main li {
    float:left;
}
#menu-main .level1 > a {
    text-align:center;
    width:auto;
    padding-left:0;
    margin-right:30px;
    color:#a4917e;
    border-bottom:1px solid #ffffff;
    border-right:0;
    background:#eeede6;
}
#menu-main .level1:hover > a,
#menu-main .level1:hover > a.active {
    color:#8eac99;
}
#menu-main .level1 > a.active {
    color:#8eac99;
}
#menu-main .level2 > a {
    width:240px;
    color:#a4917e;
    font-size:14px;
    padding-left:20px;
    text-align:left;
    line-height:40px;
    height:40px;
    background:rgba(238, 237, 230, 0.90);
    border-top:1px solid #ffffff;
    border-bottom:0;
    border-right:0;
}
#menu-main .level2:hover > a,
#menu-main .level2 > a.active {
    color:#8eac99;
}
#menu-main li ul {
    display:none;
    position:absolute;
    z-index:999;
    margin-top:-1px;
}
#menu-main li:hover ul {
    display:block;
}
#menu-main ul ul.toggle-active {
    display:none;
}

/******** Footer *******************************************************************************/

footer {
    position:fixed;
    bottom:0;
    left:0;
}
#footer-wrapper {
    margin:0 auto;
    max-width:980px;
}

/******** Menu Main Toggle *********************************************************************/

#menu-toggle {
    display:none;
}

}

/******** min 1024 ******************************************************************************/

@media (-webkit-min-device-pixel-ratio: 1.5) {

#logo {
    background:transparent url("../images/koerperhandwerk@2x.png") no-repeat center right;
    background-size:135px 110px;
}
#signature {
    background:transparent url("../images/daniela@2x.png") no-repeat center right;
    background-size:100px 45px;
}

}