/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 24.09.2016, 12:12:54
    Author     : benjaminbuchholz
*/
/* roboto-300 - latin */

body {

    --primary-color: #fc9b00;

    --text-color: #fff;

    --hero-font: "Leckerli One";
    --text-font: "Varela Round";

    --link-color: #e7000e;

    --h1-color: var(--primary-color);
    --h1-font: "Varela Round";
    --h1-font-weight: normal;
    --h1-letter-spacing: 0.0;

    --h2-color: var(--link-color);
    --h2-font: "Varela Round";
    --h2-font-weight: normal;
    --h2-letter-spacing: 0.0;

    --h3-color: #000;
    --h3-font: "Varela Round";
    --h3-font-weight: 500;
    --h3-letter-spacing: 0.0;

    --btn-cta-background: #5aaf24;
    --btn-cta-border: #5aaf24;
    --btn-cta-font: #fff;

    --btn-primary-background: #fff;
    --btn-primary-border: #5aaf24;
    --btn-primary-font: #5aaf24;

    --btn-secondary-background: #fff;
    --btn-secondary-border: #fff;
    --btn-secondary-font: #000;

    --group-icon-background: #ffffff;

    --modal-header: #edd9c5;
    --modal-light: #f6ece2;

    --logo-max-height: 90px;
    --logo-margin-top: 10px;
    --logo-max-height-mobile: 50px;
    --logo-margin-top-mobile: 0px;

    --header-background: rgba(0,0,0,0.33);
    --bottom-color: var(--text-color);

    background-size: auto;
    background-repeat: repeat;

    background-image: url("../img/background.jpg");

}

/*------------Header---------------*/

header {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, var(--header-background) 66%, rgba(0,0,0,0.0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%, var(--header-background) 66%, rgba(0,0,0,0.0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, var(--header-background) 66%, rgba(0,0,0,0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.logo-container  img {
    max-height: var(--logo-max-height);
    margin-top: var(--logo-margin-top);
}

a {
  color: var(--link-color);
}

a:hover {
    color: var(--link-color);
}

#content {
    background-color: transparent;
    color: var(--text-color);
}

#btn-show-cart {
    border: 2px solid var(--btn-primary-outline);
    color: var(--btn-primary-font);
    background-color: var(--btn-primary-background);
}

/*------------Fonts---------------*/

div.error-message {
    font-weight: 500;
    color: red;
}

#contact-info strong {
    font-size: 1.125rem;
}

h1 {
    color: var(--h1-color);
    font-family: var(--h1-font);
    font-weight: var(--h1-font-weight);
    letter-spacing: var(--h1-letter-spacing);
}

h1.home-h1 {
    font-family: var(--hero-font);
    font-size: 60px;
    color: var(--primary-color);
    text-shadow: 2px 2px 1px #000;
    max-width: 1000px;
    margin: 0 auto 10px auto;
}

h2 {
    color: var(--h2-color);
    font-family: var(--h2-font);
    font-weight: var(--h2-font-weight);
    letter-spacing: var(--h2-letter-spacing);
}

h2.home-h2 {
    font-family: var(--hero-font);
    font-size: 30px;
    color: var(--primary-color);
    text-shadow: 2px 2px 1px #000;
}

h3 {
    color: var(--h3-color);
    font-family: var(--h3-font);
    font-weight: var(--h3-font-weight);
    letter-spacing: var(--h3-letter-spacing);
}

h4 {
    color: var(--h3-color);
    font-family: var(--h3-font);
    font-weight: var(--h3-font-weight);
    letter-spacing: var(--h3-letter-spacing);
}

h5 {
    color: var(--h3-color);
    font-family: var(--h3-font);
    font-weight: var(--h3-font-weight);
    letter-spacing: var(--h3-letter-spacing);
}

.home-teaser p {
    color: var(--primary-color);
    text-shadow: 1px 1px 1px #000;
}

/*------------Header---------------*/

header nav .navbar-collapse.collapse:not(.in) {
    padding-top: 45px;
}

/*------------Navi Toggler---------------*/

.navbar-default .navbar-toggle {
    border: 2px solid var(--link-color);
    border-radius: 4px;
    margin-top: 27px;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: var(--link-color);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--link-color);
}

.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: white;
}

/*------------Navi Main---------------*/

.navbar-default .navbar-nav > li > a {
    color: var(--link-color);
    font-family: var(--h1-font);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*------------Navi Sub---------------*/

.navbar-nav .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.95);
}

.navbar-default .navbar-nav>.open>a {
    background-color: transparent;
    color: white;
}

.dropdown-menu>li>a {
    color: var(--link-color);
}

.dropdown-menu.open {
    background-color: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: var(--primary-color);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--primary-color);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--primary-color);
    text-decoration: none;

}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--primary-color);
    background-color: transparent;
}

.home-section {
    background-color: transparent;
}

/*------------Home Icons---------------*/

.group-icons img {
    background-color: var(--group-icon-background);
    fill: var(--group-icon-color);
    padding: 20%;
    margin-bottom: 20px;
    border-radius: 10%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);
}

.group-icons img:hover {
    background: -moz-linear-gradient(180deg, #FFF, var(--modal-light));
    background: -webkit-linear-gradient(180deg, #FFF, var(--modal-light));
    background: linear-gradient(180deg, #FFF, var(--modal-light));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="var(--modal-light)",GradientType=1);
}

.group-icons a {
    color: var(--link-color);
}

/*------------Productlist---------------*/

.product-list-item {
    background-color: transparent;
}

.product-list-item:not(.devider):hover {
    background: -moz-linear-gradient(180deg, #FFF, var(--modal-light));
    background: -webkit-linear-gradient(180deg, #FFF, var(--modal-light));
    background: linear-gradient(180deg, #FFF, var(--modal-light));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="var(--modal-light)",GradientType=1);
}

span.product-disc-price {
    color: var(--primary-color);
}

.btn-product-info {
    background-color: var(--modal-header);
    border: 2px solid var(--modal-header);
    color: white;
}

.btn-product-info:hover {
    background-color: #fff;
    color: var(--modal-header);
}

.seperator-gradient-transparent {
    height: 1px;
    /*background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, var(--modal-header)));*/
    background-color: var(--modal-light);
}

.btn-cta {
    background-color: var(--btn-cta-background);
    border-color: var(--btn-cta-border);
    color: var(--btn-cta-font);
}
.btn-cta:hover {
    background-color:var(--btn-ctay-font);
    border-color: var(--btn-cta-border);
    color: var(--btn-cta-background);
}

.btn-primary {
    background-color: var(--btn-primary-background);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-font);
}
.btn-primary:hover {
    background-color:var(--btn-primary-font);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-background);
}

#start-teaser {
    max-width: 100%;
    border-radius: 6px;
}


/*------------OptionModal---------------*/

.option-group-section > .header {
    background-color: var(--modal-light);
    color: #000;
}

.variant-group-section > .header {
    background-color: var(--modal-light);
    color: #000;
}

.modal-footer {
    border-color: var(--modal-light);
}

/*------------cart---------------*/

#cart-container {
    background-color: white;
}

.btn-cart-quantity-add {
    color: var(--primary-color);
}

.btn-cart-quantity-min {
    color: var(--primary-color);
}

/*------------Modal---------------*/

div.modal-header,
.bootstrap-dialog.type-primary .modal-header {
    background-color: var(--modal-header);
    border-bottom: 0;
    color: #000;
}

.bootstrap-dialog .modal-content {
    background-color: white !important;
    color: black;
}

/*------------Footer---------------*/

#footer {
    background-color: var(--primary-color);
    color: white;
}

#footer a {
    color: white;
}

#bottom {
    color: var(--bottom-color);
}

#bottom a {
    color: var(--link-color);
}

#toTop {
    background-color: var(--btn-primary-background);
    border-color: var(--link-color);
}

#toTop::after {
    color: var(--link-color);
}

#toTop.show {
    opacity: 1;
    visibility: visible;
}

/* -------------STYLING-------------*/

.btn-bottom {
    margin-bottom: 15px;
    margin-top: 20px;
}

.js-switch {
    margin-right: 10px;
}

.switch-label{
    padding-top: 10px;
}

.contact-table td > a {
    margin-left: 5px;
}

/*------------Cookie bar---------------*/

.cookie-bar a {
/*    text-decoration: underline;*/
    color: var(--primary-color);
}

/*------------Ingredients---------------*/

.ingredient-table th {
    background-color: var(--modal-light);
}

.ingredient-table td, .ingredient-table th {
    border-color: var(--modal-light);
}