/* Template for Diethelm Bodenbeläge © admotion */


html 
{
   height:			100%;
}


body
{
    height:         100%;
    margin:			0px;
    padding:		0px;
    font-family:	'Mulish';
    font-weight:	300;
    font-size:		18px;
    line-height:	170%;
    letter-spacing:	0.04em;
}



#system-message { margin: 0px; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }



#header { padding: 0px 0px 15px 0px; position: fixed; background: #ffffff; right: 30px; left: 30px; z-index: 9999; }
#logo { width: 200px; padding: 25px 0px 5px 0px; }
#logo p { margin: 0px; }


#logo { transition: .3s ease-out; }
.loganim { animation: zeichnen 2.5s ease-in-out; }
@keyframes zeichnen {
    0% {stroke-dashoffset: 574;}
    20% {stroke-dashoffset: 574;}
    100% {stroke-dashoffset: 0;}
    }


#menu-small { position: absolute; right: 0px; top: 70px;  }
#menu { display: none; }

#icons { position: absolute; right: 0px; padding: 10px 0px 0px 0px; top: 0; }
#raumplaner { position: absolute; width: 25px; height: 22px; right: 121px; top: 16px; font-weight: 400; background: url(../images/raumplaner.svg) no-repeat scroll right center; background-size: 25px 22px; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
#raumplaner p { display: none; }
a #raumplaner { color: #00387A !important; }
#mail { width: 25px; float: left; margin: 0px 20px 0px 0px; }
#telephone { width: 17px; float: left; margin: 0px 10px 0px 0px; }
#warenkorb { width: 30px; float: left; height: 26px; margin: 4px 0px 0px 0px; background: url(../images/warenkorb.svg) no-repeat scroll 0 0; background-size: 30px 26px; }

#showbox { margin: 0px 30px; }
#titelbild { padding: 127px 0px 0px 0px; margin: 0px 0px 30px 0px; }
#titelbild p { margin: 0px; }

#db { position: absolute; z-index: 999; width: 80px; top: 50%; left: 50%; margin: 0px 0px 0px -40px; }
#db svg { width: 100%; }

#container-einleitung { background: #00387A; margin: 0px 30px 30px 30px; }
#einleitung { padding: 30px; }
#einleitung h1 { color: #ffffff; }


/* Shop */

.warenkorb-text { font-size: 0; }
#jshop_module_cart { position: relative; }
#jshop_quantity_products { background: #00387A; position: absolute; width: 17px; top: -10px; right: -10px; height: 15px; border-radius: 10px; text-align: center; color: #ffffff; font-size: 11px; padding: 4px 1px 0px 1px; line-height: 100%; }

#jshop_module_cart td { border: 0px; padding: 0px; }

.btn { border: 1px solid #00387A; font-size: 16px; padding: 10px 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #00387A; margin: 0px; display: inline-block; transition: .3s ease-out; }
.btn:hover { background: #00387A; color: #ffffff !important; }

.inputbox { border-radius: 0px; }

.input { border-radius: 0px; border: 1px solid #bebebe; padding: 10px; width: 90%; box-sizing: border-box; }

#checkout .pull-right { margin-top: 15px; }
.jshop .prod_qty_input input { box-sizing: border-box; }




#text a { color: #00387A; font-weight: 700; }
#text ul { margin: 0px 0px 10px 0px; padding: 0px; }
#text li { margin: 0px; padding: 0px 0px 0px 25px; list-style: none; position: relative; line-height: 170%; }
#text li:before { content: ""; position: absolute; width: 11px; height: 1px; background: #000000; left: 0; margin: 15px 0px 0px 0px; }

#container-stellen { position: absolute; right: 60px; bottom: 0px; z-index: 9997; }
#mann { position: absolute; top: -150px; right: 20px; width: 150px; height: 153px; background: url(../images/mann.png) no-repeat scroll 0 0; background-size: 150px 153px; z-index: 9999; }

#stellen { background: #ffffff; color: #00387A; margin: -34px 0px 0px 0px; padding: 15px 80px 10px 30px;  }
#stellen p { margin: 0px; }
#stellen a { color: #000000; }
#stellen h3 { color: #00387A; font-weight: 600; display: none; }
.mobilehide { display: none; }

#button { background: #00387A; color: #fff; padding: 15px; position: absolute; right: 60px; top: 200px; transform: rotate(-7deg); z-index: 9997; width: 225px; animation: scaleIn 1s ease-out; transition: 0.2s ease;}
#button:hover { transform: scale(1.1) rotate(-5deg);}
#button p { margin: 0px; }
#button a { color: #fff;display: block; }

#button2 { position: absolute; right: 60px; left: 60px; bottom: 0px; z-index: 9997; width: auto;  transition: 0.2s ease;}
#button2:hover { transform: scale(1.1);}
#button2 p { margin: 0px; }

@keyframes scaleIn {
    0% {transform: scale(0);}
    30% {transform: scale(0) rotate(0deg);}
    100% {transform: scale(1) rotate(-7deg);}
}

#webdesign { position: fixed; width: 25px; height: 100px; right: 0; bottom: 50px; background: #00387A url(../images/webdesign.png) no-repeat scroll center center; background-size: 20px 94px; z-index: 10;}

#inhalt { margin: 0px 30px; background: #e7ebf1; }
#content { padding: 30px; }

#interesse { margin: 0px 30px; padding: 0px 0px 15px 0px; }

#container-details { padding: 0px 0px 30px 0px; }
#details { margin: 0px 0px 0px 30px; position: relative; padding: 30px 0px; }
#details-inhalt { position: relative; z-index: 1; }
#details-hintergrund { background: #ffffff; position: absolute; top: 0; bottom: 0; z-index: 0; left: 30px; width: calc(100% - 30px); }


.container-lieferanten { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: space-between; }
.lieferanten { width: 48%; margin: 0px 0px 2% 0px; background: #ffffff; }
.lieferanten img { border: 1px solid #6f7070; }



footer { background: #00387A; color: #ffffff; padding: 30px 30px 20px 30px; margin: 30px 0px 0px 0px; }
footer a { color: #ffffff; }
#kontakt { border-bottom: 1px solid #ffffff; padding: 0px 0px 20px 0px; }
#lachen { border-bottom: 1px solid #ffffff; padding: 20px 0px 20px 0px; }
#schmerikon { padding: 20px 0px 0px 0px; }

.socialmedia p { margin: 0px; }
.facebook { float: left; width: 15px; margin: 0px 20px 0px 0px; }
.instagram { float: left; width: 30px; padding: 1px 0px 0px 0px; }

#footerlogo {position: relative; width: 100px;}

.back-to-top { font-size: 0; background: url(../images/totop.png) no-repeat scroll 0 0; background-size: 30px 19px; width: 30px; height: 19px; bottom: 20px; right: 15px; position: fixed; left: 50%; margin: 0px 0px 0px -15px; }



#news { background: #00387A; color: #ffffff; position: absolute; bottom: 0; z-index: 9999; left: 30px; right: 30px; font-weight: 700; text-align: center; padding: 20px 30px 15px 30px; }
#news h3 { margin: 0px 0px 10px 0px; }


h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 22px; line-height: 130%; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: #00387A; }
h2 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: #00387A; }
h3 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 20px; line-height: 160%; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; }
h4 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 18px; line-height: 170%; font-weight: 700; letter-spacing: 0.03em; }
h5 { margin: 0px 0px 10px 0px; padding: 20px 0px 0px 0px; font-size: 20px; line-height: 170%; font-weight: 700; letter-spacing: 0.03em; }



a { text-decoration: none; outline: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; outline: none; }


p { margin: 0px 0px 10px 0px; }
.clear { line-height: 0; }

table { margin: 0px 0px 10px 0px; width: 100%; }

strong { font-weight: 700; }









@media(min-width:800px)
{
    #header { padding: 0px 0px 20px 0px; left: 50px; right: 50px; }

    #logo { width: 250px; }
    #icons { padding: 15px 0px 0px 0px; }
    #raumplaner { padding: 0px 40px 0px 0px; width: auto; height: auto; top: 16px; }
    #raumplaner p { display: block; margin: 0px; }
    #menu-small { right: 0px; top: 100px;  }
    
    #showbox { margin: 0px 50px; }
    #titelbild { padding: 153px 0px 0px 0px; margin: 0px 0px 50px 0px; }

    #container-einleitung { margin: 0px 50px 50px 50px;}
    #einleitung { margin: 0px auto; width: 600px; padding: 50px 0px; }
    
    #inhalt { margin: 0px 50px; }

    #content { margin: 0px auto; width: 600px; padding: 50px 0px; }
    #interesse { margin: 0px auto; width: 600px; padding: 0px 0px 30px 0px; box-sizing: border-box; }
    
    #container-details { padding: 0px 0px 50px 0px; }
    #details { margin: 0px auto; width: 600px; padding: 50px 0px; }
    #details-hintergrund { left: 50px; width: calc(50vw + 220px); }
    

    footer { padding: 30px 0px 20px 0px; margin: 50px 0px 0px 0px; }
    #footer { margin: 0px auto; width: 600px; }
    
    
    #button { width: auto; right: 120px; top: 240px;}
    #button2 { width: 600px; right: 50px; transform-origin: bottom right; left: auto;}

    
}




@media(min-width:1100px)
{
    #content { width: 900px; padding: 50px 0px; }
    #interesse { width: 900px; }
    #einleitung { width: 900px; padding: 50px 0px; }
    

    #news { width: 400px; left: auto; right: 150px; bottom: 90px; transform: rotate(-5deg); }
    #db { width: 120px; margin: 0px 0px 0px -60px; }
    
    #container-stellen { position: absolute; right: 100px; bottom: 0px; }
    #mann { position: absolute; top: -260px; width: 260px; height: 265px; background: url(../images/mann.png) no-repeat scroll 0 0; background-size: 260px 265px; z-index: 9999; }
    #stellen { width: 400px; margin: -59px 0px 0px 0px; padding: 25px 30px 30px 30px; }
    #stellen h3 { display: block; }
    .mobilehide { display: block; }
    
    #details { width: 900px; }
    #details-hintergrund { width: calc(50vw + 380px); }
    
    
    footer { padding: 70px 0px 60px 0px; position: relative;}
    #footer { width: 900px; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
    #kontakt { float: left; width: 33.333%; display: -webkit-flex; display: -ms-flexbox; display: flex; border: 0px; padding: 0px 30px 0px 0px; box-sizing: border-box; }
    #lachen { float: left; width: 33.333%; border-left: 1px solid #ffffff; border-bottom: 0px; padding: 0px 0px 0px 30px; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
    #schmerikon { float: left; width: 33.333%; border-left: 1px solid #ffffff; padding: 0px 0px 0px 30px; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

    #footerlogo {position: absolute; right: 50px; bottom: 50px;}


    h1 { margin: 0px 0px 30px 0px; font-size: 40px; }

    .lieferanten { width: 23%; margin: 0px 0px 2% 0px; background: #ffffff; }
}




@media(min-width:1400px)
{
    #header { padding: 0px; }

    #logo { float: left; padding: 35px 0px 0px 0px; }
    .shrink #logo { width: 180px; }

    #menu-small { display: none; }
    #menu { display: block; float: right; padding: 102px 0px 0px 0px; transition: .3s ease-out; }
    .shrink #menu { padding: 80px 0px 0px 0px; }

    #titelbild { padding: 170px 0px 0px 0px; }

    #einleitung { width: 1100px; padding: 80px 0px 70px 0px; }
    
    #inhalt { margin: 0px 50px; }
    #content { width: 1100px; padding: 100px 0px; }
    #interesse { width: 1100px; }
    
    #details { width: 1100px; }
    #details-hintergrund { width: calc(50vw + 450px); }
    

    footer { margin: 80px 0px 0px 0px; }

    #footer { width: 1100px; }
    #lachen { padding: 0px 0px 0px 40px; }
    #schmerikon { padding: 0px 0px 0px 40px; }

    .lieferanten { width: 18%; }
}




@media(min-width:1600px)
{
    #header { left: 70px; right: 70px; }

    #icons { float: right; padding: 93px 0px 0px 60px; position: static; transition: .3s ease-out; }
    .shrink #icons { padding: 73px 0px 0px 60px; }

    #raumplaner { right: 0px; }
    
    
    #showbox { margin: 0px 70px; }
    #titelbild { margin: 0px 0px 70px 0px; }
    
    #container-stellen { right: 140px; }
    #container-einleitung { margin: 0px 70px 70px 70px; }
    #einleitung { width: 1300px; }
    
    #content { width: 1300px; }
    #interesse { width: 1300px; padding: 0px 0px 50px 0px; }
    
    #inhalt { margin: 0px 70px; }

    
    #container-details { padding: 0px 0px 70px 0px; }
    #details { width: 1300px; padding: 70px 0px; }
    #details-hintergrund { left: 70px; width: calc(50vw + 530px); }
    
    #footer { width: 1300px; }
    
    #button2 {right: 70px;}


    /*.max-500 { width: 1300px; max-width: 1300px; }*/

}