/*
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
*/

body {

    --primary-color: #F45744;

    --text-color: #554F0E⁣;

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

    --link-color: #F45744;

    --h1-color: #767000;
    --h1-font: "Varela Round";
    --h1-font-weight: normal;
    --h1-letter-spacing: 0.0;

    --h2-color: #767000;
    --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: var(--primary-color);
    --btn-cta-border: var(--primary-color);
    --btn-cta-font: #fff;

    --btn-primary-background: #fff;
    --btn-primary-border: var(--primary-color);
    --btn-primary-font: var(--primary-color);

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

    --group-icon-background: #ffffff;

    --modal-header: #e9e2ca;
    --modal-light: #fbf7ea;

    --logo-max-height: 70px;
    --logo-margin-top: 10px;

    --header-background: rgba(247,240,214,0.66);
    --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(247,240,214,1.00) 0%, var(--header-background) 80%, rgba(247,240,214,0.0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(247,240,214,1.00) 0%, var(--header-background) 80%, rgba(247,214,255,0.0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(247,240,214,1.00) 0%, var(--header-background) 80%, rgba(247,240,214,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;
    text-shadow: 2px 2px 0px var(--modal-header);
    max-width: 900px;
    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);
}

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(--text-color);
}

/*------------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(--h3-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(165deg, #FFF, var(--modal-light));
    background: -webkit-linear-gradient(165deg, #FFF, var(--modal-light));
    background: linear-gradient(165deg, #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: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-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);
}


/*------------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);
}