/*
    Author:   Martin Stettler (http://dieweberei.ch/)
    Version:  18052016
*/

/* ==========================================================================================================
   BASE STYLES
   ========================================================================================================== */
html,
body,
ul { /* ul to be help-block full left */
    margin:0;
    padding:0;
    background-color: #FFF; /* color def for form */
    font: normal 16px 'Roboto', Arial, sans-serif; /* no color def for form! */
    font-weight: 400;
    line-height: 1;
}

li {
    list-style-type: none; /* for text-danger in form */
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}

h2 {
    font-weight: 300;
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 10px;
}


p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}


h3,
p.lead {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

h3 {
    font-weight: 500;
    margin-bottom: 5px;
}

h4 {
    color: #d1d1d1;
    font-size: 26px;
    font-weight: 300;
    line-height: 32px;
    margin-bottom: 20px;
}

h5 {
    font-size: 80px;
    font-weight: 300;
}

a {
    color: #646464;
    text-decoration: none;
}

a:hover {
    color: #d1d1d1;
    text-decoration: none;
}

a,
a:hover {
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

a.icon-link:hover {
    opacity: 0.65;
}

a.icon-link,
a.icon-link:hover,
.navbar,
.navbar-brand span,
.navbar-brand.shrink span,
.navbar-nav,
.navbar-nav.shrink,
.navbar-toggle,
.navbar-toggle.shrink {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

/* ==========================================================================
   Browse Happy prompt lte IE 7
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #cc0033;
    color: #FFF;
    padding: 0.5em;
}

.browsehappy a {
    color: #FFF;
    text-decoration: underline;
}

.browsehappy a:hover {
    text-decoration: none;
}

/* ==========================================================================
   HEADER & LOGO
   ========================================================================== */

a.navbar-brand span {
    display: block;
    text-indent: -9999px;
    width: 220px;
    height: 28px;
    background-image: url(../graphics/fotofritz.svg);
    background-size: 220px 28px;
}

.ie8 a.navbar-brand span {
    width: 225px;
    height: 28px;
    background-image: url(../graphics/fotofritz.png);
    background-size: 225px 28px;
}

a.navbar-brand.shrink span {
    width: 220px;
    height: 28px;
    background-size: 220px 28px;
}

@media (min-width: 481px) { 
    
    a.navbar-brand span {
        width: 300px;
        height: 38px;
        background-size: 300px 38px;
    }

    a.navbar-brand.shrink span {
        width: 251px;
        height: 32px;
        background-size: 251px 32px;
    }
}

@media (min-width: 1202px) { 
    
    a.navbar-brand span {
        width: 385px;
        height: 49px;
        background-size: 385px 49px;
    }

}

/* ==========================================================================================================
   NAVIGATION STYLES
   ========================================================================================================== */
body {
    padding-top: 56px; /* = navbar height */
}

@media (min-width: 481px) {
    body {
        padding-top: 80px;
    }
}

@media (min-width: 768px) {
    body {
        padding-top: 130px;
    }
}

.nav {
    background-color: transparent;
}

/* Navbar */
.navbar { /* header full-width */
    height: 56px;
    margin-bottom: 0px;
    border: 0;
    background: #646464;
    min-height: 50px;
}

.navbar.shrink {
    height: 40px;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
}

.navbar-nav.shrink {
    top: 0 !important;
    margin: 0 !important;
}

.navbar-brand {
    padding: 15px;
}

.navbar-brand.shrink {
    padding: 10px 15px;
}

@media (min-width: 481px) { 
    
    .navbar {
        height: 80px;
    }

    .navbar.shrink {
        height: 50px;
    }

    .navbar-brand {
        padding: 18px 15px;
    }

    .navbar-nav {
        margin-top: 28px !important;
    }


}

@media (min-width: 768px) { 
    
    .navbar {
        height: 130px;
    }

    .navbar-nav {
        position: relative;
        margin-top: 50px !important;
    }

    .logo-shadow {
        position: absolute;
        top: -2px;
        left: 50%;
        width: 178px;
        height: 132px;
        background-size: 178px 132px;
        background-image: url(../graphics/logo-shadow.png);
    }

    .ie8 .logo-shadow {
        display: none;
    }

    .logo-shadow.shrink {
        width: 0;
        height: 0;
    }

    .navbar.shrink {
        height: 50px;
    }

    .navbar-brand {
        padding: 40px 15px;
    }

}

@media (min-width: 992px) {     
    .navbar-nav {
        margin-top: 0 !important;
        padding-top: 43px;
    }

    .navbar-nav.shrink {
        padding-top: 5px;
    }

    .logo-shadow {
        left: 35%;
    }
}

@media (min-width: 1202px) {     
    .navbar-nav {
        padding-top: 50px;
    }
}

/* Toggle */
button.navbar-toggle {
    z-index: 1200;
}

.navbar-toggle {
    margin-right: 0;
    border: 0;
    margin-top: 12px;
    border-radius: 1px;
    background-color: #b0d23d;
    z-index: 2000;
}

.navbar-toggle.shrink {
    margin-top: 8px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #d1d1d1 !important; /* for Safari */
}

@media (max-width: 320px) {
    .navbar-toggle {
        position: absolute;
        top: 0;
        right: 0;
    }
}

@media (max-width: 767px) {
    .navbar-toggle {
        margin-right: 15px;
    }

    .navbar-offcanvas {
        padding-left: 15px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .navbar-toggle {
        position: absolute;
        right: 15px;
    }
}

/* Navigation colors */
.navbar-default .navbar-nav > li > a {
    color: #d1d1d1;
    background-color: transparent;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #FFF;
    background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: transparent;
}

/* Menu items */
.navbar-nav > li > a {
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
}

.navbar-default.navbar-shrink .navbar-nav > .active > a:hover, /* for correct nav color after scrolling */
.navbar-default.navbar-shrink .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: transparent;
}

/* Change navbar breakpoint */
@media (max-width: 991px) {

    .navbar > .container {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .navbar-default {
        padding: 0;
    }

    .navbar-nav {
        width: 100%;
        margin: 0;
        padding: 0 15px;
    }

    .navbar-header {
        float: none;
        padding: 0 15px;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-brand span {
        padding-left: 15px;
    }

    .navbar-collapse {
        box-shadow: none;
        border: none;
        background-color: transparent;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        width: 100%;
        background-color: #646464;
    }

    .navbar-nav > li {
        float: none;
        text-align: center;
    }
}

@media (min-width: 992px) {

    .navbar-nav > li > a {
        margin: 0;
        padding: 10px;
    }

    .navbar-nav.shrink > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

}

/* ==========================================================================
   CONTENT
   ========================================================================== */

section {
    padding: 60px 0;
}

/* new breakpoint */
.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }

/*@media (min-width: 480px) { */
  @media (min-width: 480px) and (max-width: 768px) {
  .col-ms-1,
  .col-ms-2,
  .col-ms-3,
  .col-ms-4,
  .col-ms-5,
  .col-ms-6,
  .col-ms-7,
  .col-ms-8,
  .col-ms-9,
  .col-ms-10,
  .col-ms-11 {
    float: left; }

  .col-ms-1 {
    width: 8.33333%; }

  .col-ms-2 {
    width: 16.66667%; }

  .col-ms-3 {
    width: 25%; }

  .col-ms-4 {
    width: 33.33333%; }

  .col-ms-5 {
    width: 41.66667%; }

  .col-ms-6 {
    width: 50%; }

  .col-ms-7 {
    width: 58.33333%; }

  .col-ms-8 {
    width: 66.66667%; }

  .col-ms-9 {
    width: 75%; }

  .col-ms-10 {
    width: 83.33333%; }

  .col-ms-11 {
    width: 91.66667%; }

  .col-ms-12 {
    width: 100%; }

  .col-ms-push-1 {
    left: 8.33333%; }

  .col-ms-push-2 {
    left: 16.66667%; }

  .col-ms-push-3 {
    left: 25%; }

  .col-ms-push-4 {
    left: 33.33333%; }

  .col-ms-push-5 {
    left: 41.66667%; }

  .col-ms-push-6 {
    left: 50%; }

  .col-ms-push-7 {
    left: 58.33333%; }

  .col-ms-push-8 {
    left: 66.66667%; }

  .col-ms-push-9 {
    left: 75%; }

  .col-ms-push-10 {
    left: 83.33333%; }

  .col-ms-push-11 {
    left: 91.66667%; }

  .col-ms-pull-1 {
    right: 8.33333%; }

  .col-ms-pull-2 {
    right: 16.66667%; }

  .col-ms-pull-3 {
    right: 25%; }

  .col-ms-pull-4 {
    right: 33.33333%; }

  .col-ms-pull-5 {
    right: 41.66667%; }

  .col-ms-pull-6 {
    right: 50%; }

  .col-ms-pull-7 {
    right: 58.33333%; }

  .col-ms-pull-8 {
    right: 66.66667%; }

  .col-ms-pull-9 {
    right: 75%; }

  .col-ms-pull-10 {
    right: 83.33333%; }

  .col-ms-pull-11 {
    right: 91.66667%; }

  .col-ms-offset-1 {
    margin-left: 8.33333%; }

  .col-ms-offset-2 {
    margin-left: 16.66667%; }

  .col-ms-offset-3 {
    margin-left: 25%; }

  .col-ms-offset-4 {
    margin-left: 33.33333%; }

  .col-ms-offset-5 {
    margin-left: 41.66667%; }

  .col-ms-offset-6 {
    margin-left: 50%; }

  .col-ms-offset-7 {
    margin-left: 58.33333%; }

  .col-ms-offset-8 {
    margin-left: 66.66667%; }

  .col-ms-offset-9 {
    margin-left: 75%; }

  .col-ms-offset-10 {
    margin-left: 83.33333%; }

  .col-ms-offset-11 {
    margin-left: 91.66667%; } }
@media (min-width: 480px) and (max-width: 768px) {
  .container {
    max-width: 748px; } }

#not_found {
    background: #646464;
    color: #d1d1d1;
}

#not_found p {
    font-weight: 300;
}

#not_found a {
    color: #FFF;
    text-decoration: underline;
}

#not_found a:hover {
    color: #d1d1d1;
    text-decoration: none;
}

/*
.container {
    border: 0px solid orange;
}

.row {
  border: 1px solid blue;
}

.col-lg-4,
.col-lg-12 {
  border: 1px solid red;
}
*/

.bg-dark {
 background: #ededed;
}

.anchor {
    display: block;
    height: 50px; /* same height as header */
    margin-top: -50px; /* same height as header */
    visibility: hidden;
}

.lead,
.shop-item {
    text-align: center;
}

.shop-item-container {
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (min-width: 481px) {
    .shop-item {
        width: 49.9%; /* for Safari */
    }
}

@media (min-width: 992px) {
    .shop-item {
        width: 24.9%; /* for Safari */
    }
}

.shop-item-description {
    position: relative;   
    top: -30px; 
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    padding: 50px 0;
    background-color: #828282;
}

footer p,
#copyright p {
    color: #d1d1d1;
    font-weight: 300;
}

footer p a,
#copyright a {
    color: #d1d1d1;
    text-decoration: none;
}

footer p a:hover,
#copyright a:hover {
    color: #FFF;
    text-decoration: none;
}

footer i {
    font-style: normal;
    white-space: nowrap;
}

#copyright {
    padding: 30px 0 20px 0;
    background: #646464;
    text-align: center;
}

.hidden {
    display: none;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::-moz-selection {
    text-shadow: none;
    background: #646464;
    color: #FFF;
}

::selection {
    text-shadow: none;
    background: #646464;
    color: #FFF;
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: #646464;
}