/*
######################################
        Media-Queries
###################################### */

@media (max-width: 1280px) {

         #header .hero .in { width: calc(100% - 40px); padding: 0px 20px; }
         #header .hero .headline { width: 60% !important; font-size: 1.4em; }
         #header .hero .spacer { width: 40% !important; }

         #products .item .info, #products.grid2 .item .info { display: table-cell; width: 180px; text-align: center; vertical-align: middle; padding: 0px 0px 0px 0px; }
         #products .item .info .button, #products.grid2 .item .info .button { font-size: 1.0em; }

}

@media (max-width: 1080px) {
         h1 { font-size: 1.6em; }
         h2 { font-size: 1.4em; }
         h3 { font-size: 1.2em; }
         h4 { font-size: 1.8em; padding: 0px 10px; }
         q { font-size: 1.2em; }
         #site { font-size: 1.1em; }

         #products .item { width: calc(100% - 20px - 8px); padding: 10px; margin: 10px 0px 30px 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.25); -moz-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.25); box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.25); }
         #products.grid .item { width: calc((100% / 3) - 20px - 20px - 8px); padding: 10px; margin: 10px 10px 30px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
         #products .item .number, #products.grid .item .number { display: none; }
         #products .item .image { width: 180px; padding-left: 0px; padding-right: 20px; }
         #products.grid .item .image { padding: 0px; padding: 0px; text-align: center; }
         #products .item .text { height: auto; font-size: 0.9em; line-height: 1.3em; }
         #products .item .text span { font-size: 0.9em; padding: 2px 6px; }
         #products .item .text b { font-size: 1.1em; }

         #products.grid.small .item { display: inline-block; float: left; width: calc((100% / 2) - 20px - 20px - 8px); padding: 10px; margin: 20px 10px 20px 10px; font-size: 0.9em; }

}

@media (max-width: 920px) {
         #header .hero .headline { font-size: 1.1em; }
}

@media (max-width: 800px) {
         #header .menu { text-align: center; }
         #header .menu a { padding: 5px 10px; margin: 5px 10px 5px 0px; font-size: 1.1em; }

         .content { font-size: 1.1em; }
         .content img { width: 50%; height: auto; margin: 0px 15px 15px 0px;}
         .content.img_right img { margin: 0px 0px 15px 15px; }

         #footer .logo, #footer .imprint { float: none; width: calc(100% - 0px); text-align: center; }

         #products .item, #products.grid .item { display: inline-block; float: left; width: calc((100% / 2) - 20px - 20px - 8px); padding: 10px; margin: 10px 10px 30px 10px; font-size: 0.9em; }
         #products .item .image, #products .item .text, #products .item .info,
         #products.grid .item .image, #products.grid .item .text, #products.grid .item .info  { display: block; width: calc(100% - 0px); padding: 10px 0px; margin: 5px 0px; text-align: center; }
         #products .item .image img, #products.grid .item .image img { float: none; }
}

@media (max-width: 640px) {
         #header .logo img { width: 80%; height: auto; max-width: 220px; }
         #header .hero { height: auto; }
         #header .hero .headline { font-size: 0.9em; }

         .content img, .content.img_right img { float: none; width: calc(100% - 30px); height: auto; margin: 0px 15px 15px 15px; }

         #products .item, #products.grid .item, #products.grid.small .item { float: none; width: calc((100% / 1) - 20px - 20px - 8px); max-width: 300px; margin: 10px calc(50% - 150px - 10px) 30px calc(50% - 150px - 10px); font-size: 1.0em; }

         q { font-size: 1.1em; }
         q:after { left: 60px; border-width: 20px; margin-left: -20px; }
}

@media (max-width: 480px) {
         .in { }
         .content { font-size: 1.0em; }
         .content img, .content.img_right img { float: none; width: calc(100% - 0px); height: auto; margin: 0px 0px 15px 0px; }

         #header .menu a { padding: 5px 5px; margin: 5px 5px 5px 0px; font-size: 1.0em; }

         #products .item, #products.grid .item { width: calc((100% / 1) - 20px - 0px - 8px); }

}