/*
Theme Name: Kettle Catalogue
Theme URI: https://catalogue.kettlefoods.co.uk
Author: Ben Maxfield
Author URI: https://kettlefoods.co.uk/
Description: Kettle foods catalogue theme
Version: 1.0
Tags: 
Text Domain: KettleFoods
*/
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../webfonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
         url('../webfonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../webfonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../webfonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../webfonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../webfonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-italic - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('../webfonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Italic'), local('Roboto-Italic'),
         url('../webfonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../webfonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../webfonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('../webfonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../webfonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-700 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../webfonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Roboto Bold'), local('Roboto-Bold'),
         url('../webfonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../webfonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../webfonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../webfonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../webfonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
  }

body {
    font-family: 'Roboto', sans-serif;
}

main {
    padding-bottom: 60px;
}

.left {
    float: left !important;
}
.right {
    float: right !important;
}

.form-inline > *, .form-group > * {
    margin: 0 3px !important;
}

@media only screen and (max-width: 1234px){
    .form-group > select {
        margin: 5px auto !important;
        width: 400px !important;
        max-width: 100%;
    }
}

button {
    background: #3a48a0;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
}

.content-container {
    max-width: 85%;
    margin: 20px auto;
}

/*PAGE LOADER*/
#page-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    z-index: 1080;
}

#spinner-container {
    top: 48%;
    position: relative;
    text-align: center;
}

.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}
.preloader-wrapper.active {
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite;
}
.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-color: #3f51b5;
}

.active .spinner-layer {
    opacity: 1;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both;
}

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent!important;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
.circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent!important;
    transform: rotate(129deg);
}
.active .circle-clipper.left .circle {
    -webkit-animation: left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both;
    animation: left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both;
}
.circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent!important;
    transform: rotate(-129deg);
}
.gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}
@keyframes container-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fill-unfill-rotate {
    12.5% {
        transform: rotate(135deg);
    }
    25% {
        transform: rotate(270deg);
    }
    37.5% {
        transform: rotate(405deg);
    }
    
    50% {
        transform: rotate(540deg);
    }
    62.5% {
        transform: rotate(675deg);
    }
    75% {
        transform: rotate(810deg);
    }
    87.5% {
        transform: rotate(945deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}
@keyframes left-spin {
    0% {
        transform: rotate(130deg);
    }

    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(130deg);
    }
}

@keyframes right-spin {
    0% {
        transform: rotate(-130deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-130deg);
    }
}
/*END PAGE LOADER*/


/*NAV*/
nav {
    text-align: center;
    padding: 0 20px;    
    box-shadow: 0 0px 0px 0 rgba(0,0,0,.14), 0 0px 0px 0px rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.2);
}

nav #btn-back, nav #btn-home, nav #btn-mail {
    font-size: 30px;
    cursor: pointer;    
    padding: 11px;
    display: none;
}

nav #btn-back {
    float: left;
}

nav #btn-home,nav #btn-mail {
    float: right;
}

nav #btn-mail {
    margin-left: -67px;
}

nav i {
    color: #3a48a0;
}

nav #logo {
    display: inline-block;
}

nav #logo img {
    height: 65px;
    padding: 5px 0;
}
/*END NAV*/

/*HOME*/
#home-container {
    display: none;
}

#home-container #advert-qr-container {
    text-align: center;
    padding: 10px 0;
}
#home-container #advert-qr-container img {
    height: 180px;
}

#home-container .qr-container {
    display: inline-block;
    margin: 10px 40px;
}

#home-container #brands-container {
    text-align: center;
    margin: 60px auto;
}

#home-container .brand-container {
    width: 250px;
    display: inline-block;    
    cursor: pointer;
    margin: 20px;
    padding: 10px;
}

#home-container .brand-container img {
    max-width: 100%;
}


#home-container #catalogue-adverts-container {
    text-align: center;
    margin: 60px auto;
}

#home-container .catalogue-advert-container {
    width: 250px;
    display: inline-block;    
    cursor: pointer;
    margin: 20px;
    padding: 10px;
}

#home-container .catalogue-advert-container img {
    max-width: 100%;
}

/*END HOME*/

/*ADVERT*/
#advert-display {
    text-align: center;
}

#advert-display img {
    max-height: 100vh;
}
/*END ADVERT*/

/*RANGES*/

#range-selection-container {
    display: none;
}

#range-selection-container #ranges-container {
    text-align: center;
    margin: 60px auto;
}

#range-selection-container .range-container {
    width: 250px;
    display: inline-block;    
    cursor: pointer;
    margin: 20px;
    padding: 10px;
}

#range-selection-container .range-container img {
    max-width: 100%;
}
/*END RANGES*/

/*PRODUCTS*/
#products-container {
    display: none;
}

#brand-logo {
    text-align: center;
    padding: 25px;
}

#brand-logo img{
    max-width: 250px;
}

#product-results {
    text-align: center;    
    min-height: 350px;
}

#product-results .product-container {
    display: inline-block;    
    width: 350px;
    vertical-align: top;
    cursor: pointer;
    transition: box-shadow .3s;
    padding: 0px 10px;
    margin: 10px 0;
    border-radius: 5px;
    max-width: 100%;
}

#product-results .product-container:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

#product-results .product-image {
    height: 300px;
    text-align: center;
}

#product-results .product-container img {
    max-width: 100%;    
    max-height: 100%;
}

#product-results .product-detail {
    margin-top: 10px;
}

#category-data, #disclaimers {
    text-align: center;
}
#category-data span, #disclaimers span {
    margin: 4px 0;
}

.product-detail {
    height: 80px;
}

#product-count-container {
    text-align: center;
}

#product-filters form {
    margin-bottom: 22px;
}

#product-filters select{
    width: 215px;
}

@media only screen and (max-width: 1234px){
    #product-filters form {
        text-align: center;
    }
    #product-filters form .form-group {
        display: block;
        width: 100%;
        padding-bottom: 5px;
    }
}

/*END PRODUCTS*/

/*DETAILS*/
#details-container {
    display: none;
    text-align: center;
    margin-top: 50px;
}

#details-product-image {
    margin-bottom: 50px;    
    width: 85%;
    max-width: 350px;
    margin: 0 auto;
}

#details-product-image img {
    max-height: 100%;
    max-width: 100%;
}

#dietary-requirements-container {
    text-align: left;
    width: 50%;
    margin: 0 auto;
}

@media only screen and (max-width: 1450px){
    #dietary-requirements-container {
        width: 85%;
    }
}

#basic-details {
    margin: 20px 0;
}
/*END DETAILS*/

/*FOOTER*/
footer {
    text-align: center;  
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;    
    margin-bottom: -10px;
}

footer {
    padding: 10px 0;
    display: block;
    background: white;
}
/*END FOOTER*/

/*ENQUIRY FORM*/
form label {
    vertical-align: top;
    width: 100%;
    margin: 5px 10px 0px 10px;
}

input, textarea {
    width: 50%;
}

.invalid {
    border-color: red;
}

#form-errors{
    color: red;
}
/*END ENQUIRY FORM*/

/**/

#toast {
    position: fixed;
    z-index: 999;
    top: 12px;
    right: 12px;
}

.notification {
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    margin-right: 10px;
    padding: 20px;
    width: 300px;
    border-radius: 3px;
    color: white;
    right: -400px;
}
.normal {
    background: #3a48a0;
}
.success {
    background: #44be75;
}
.error {
    background: #c33c3c;
}
/**/