/* Google Fonts override
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"],
input[type="email"], input[type="text"], textarea {
    border-radius: 0px;
}

/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar {
    top: 0;
    min-height: 50px;
    margin-bottom: 1.8rem;
    background-color: rgba(255,255,255,0.9);
}

.navbar a {
    text-decoration: none;
    color: #222;
}

.navbar-container {
    line-height: 65px;
}

.navbar-brand {
    width: 50px;
    padding-right: 0.8rem;
}

.navbar-title {
    text-transform: uppercase;
    font-size: 3.2rem;
    display: none;
    vertical-align: middle;
    margin-bottom: 12px;
}

.fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

/* Text Align
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.right { text-align: right; }
.left { text-align: left; }
.center {  text-align: center; }

/* Headings (will be overwriten by mobile settings)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,h2,h3 {
    margin-top: 1.0rem;
    text-align: center;
}


/* Paragraph
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section * p {
    margin-bottom: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.4;
}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section * li {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.4;
}

/* Font Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */

img {
    vertical-align: middle;
}

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

.img-circle {
    border-radius: 50%;
}

.img-rounded {
    margin: 5px;
    border-radius: 6px;
}

.mobile-featured {
    text-align: center;
}

div.img-group img {
    margin: 5px 0 5px 0;
}

/* Collapsible
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.collapse { }
.readmore {
    display: none;
    margin-top: 2.0rem;
}
.readmore.active {
    display: block;
}

/* lightSlider overrides
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lSNext,
.lSPrev {
    font-size: 3.0rem;
}

.lSAction > .lSPrev {
    left: 0px;
}

.lSAction > .lSNext {
    right: 0px;
}

/* Shadows (MaterializeCSS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.z-depth-0, .buttons-nav .button {
	box-shadow:none !important
}
.z-depth-1,.img-circle,.img-rounded,.button,.delimiters,
nav,.card-panel,.card,.toast,.collapsible,.side-nav, .error-page {
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.z-depth-1-half,.button:hover {
	box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
}
.z-depth-2, .notification {
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}
.z-depth-3 {
	box-shadow:0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)
}
.z-depth-4,.modal > div {
	box-shadow:0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)
}
.z-depth-5 {
	box-shadow:0 27px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22)
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
    padding: 8rem 0 7rem;
}
.section-heading,
.section-description {
    margin-bottom: 1.2rem;
}

.footer {
    padding: 2rem;
}

.footer a {
    text-decoration: none;
}

.legal-notice {
    font-size: 80%;
}


.error-page {

}

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
    position: relative;
    top: 50px;
}

.products {
    position: relative;
}
.product {
    display: none;
    position: relative;
    max-width: 80%;
    margin: 3rem auto -6rem;
}
.product + .product {
    display: none;
}

/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
    background-image: url('../img/values-bg.jpg');
    background-size: cover;
    color: #fff;
    padding-bottom: 5rem;
}
.value-multiplier {
    margin-bottom: .5rem;
    color: #11DFC7;
}
.value-heading {
    margin-bottom: .3rem;
}
.value-description {
    opacity: .8;
    font-weight: 300;
}

/* Features
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.features {
    background-image: url('../img/haqihana/dogs/grass-lying-half.jpg');
    background-size: cover;
    color: #fff;
    padding-bottom: 5rem;
    height: 120px;
}
.feature-multiplier {
    margin-bottom: .5rem;
    color: #11DFC7;
}
.feature-heading {
    margin-bottom: .3rem;
}
.feature-description {
    opacity: .8;
    font-weight: 300;
}

/* Narrow section
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-info {
    border-bottom: 1px solid #ddd;
}


/* Image delimiters
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.delimiters {
    width: 100%;
    height: 350px;
    max-height: 1000px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.delimiter-1 {
    background-image: url('../img/haqihana/dogs/fugazza.jpg');
}

.delimiter-2 {
    background-image: url('../img/haqihana/dogs/grass-lying-half.jpg');
}

.delimiter-3 {
    background-image: url('../img/haqihana/dogs/chara.jpg');
}

.delimiter-4 {
    background-image: url('../img/haqihana/dogs/grass-sniffing.jpg');
}

.delimiter-5 {
    background-image: url('../img/haqihana/dogs/noirel2.jpg');
}

.delimiter-6 {
    background-image: url('../img/haqihana/dogs/erice.jpg');
}

.delimiter-olga {
    background-image: url('../img/olga/olga-horiz-web.jpg');
}

.delimiter-destroy {
    background-image: url('../img/olga/destroy-web.jpg');
}

.delimiter-cs {
    background-image: url('../img/olga/calming-signals-web.jpg');
}

.delimiter-baby {
    background-image: url('../img/olga/dog-baby-web.jpg');
}

.delimiter-cat {
    background-image: url('../img/olga/cat-web.jpg');
}

.delimiter-fear {
    background-image: url('../img/olga/fear-web.jpg');
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.buttons {
    margin-top: 1.6rem;
}

.button.button-success,
button.button-success,
input[type="submit"].button-success,
input[type="reset"].button-success,
input[type="button"].button-success {
  color: #FFF;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.button.button-success:hover,
button.button-success:hover,
input[type="submit"].button-success:hover,
input[type="reset"].button-success:hover,
input[type="button"].button-success:hover,
.button.button-success:focus,
button.button-success:focus,
input[type="submit"].button-success:focus,
input[type="reset"].button-success:focus,
input[type="button"].button-success:focus {
  color: #FFF;
  background-color: #449d44;
  border-color: #398439;
}

.buttons-nav {
    display: inline-block;
    float: right;
    padding-left: 0.8rem;
}

.buttons-nav .button {
    width: 100px;
    padding: 0 10px;
}

.buttons-nav .full-size {
    width: 100%;
}

input.has-error,
input.has-error:hover,
input.has-error:focus {
    border-color: #d9534f;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}


label.has-error {
    color: #d9534f;
}

.help-block.has-error span,
span.has-error {
    color: #d9534f;
    background-color: #FFFFFF;
    opacity: 0.8;
}

.help-block {
    margin-top: -12px;
    margin-bottom: 10px;
    font-size: 80%;
    font-weight: 600;
}

.has-success {
    color: #3c763d;
}

/* ReCaptcha
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-recaptcha {
    padding-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}

/* Alerts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.notification {
    color: #FFF;
    background-color: #5cb85c;
    border-color: #4cae4c;
    display: inline-block;
    height: 38px;
    padding: 0 15px;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}
button.close, a.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

/* Modals
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: none;
    pointer-events: none;
}
.modal:target {
    display: block;
    pointer-events: auto;
}

.modal > div {
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    background: #fff;
    border: 1px solid #bbb;
}

a.toggle-block {
    cursor: pointer;
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
    background-image: url('../img/haqihana/dogs/chara2.jpg');
    background-size: cover;
    color: #fff
}
.categories .section-description { 
    margin-bottom: 4rem;
}

.categories form textarea,
.categories form input, select {
    color: #222;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.auto-height {
    height: auto;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.table-sm {
    font-size: 80%;
}

/* Mobile first queries 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Smaller than phablet */
@media (max-width: 550px) {
    .buttons {
	text-align: center;
    }
}

/* Larger than mobile */
@media (min-width: 400px) {
}


/* Larger than phablet */
@media (min-width: 550px) {
    h1,h2,h3 { text-align: left; }
    .mobile-featured { display: none; }
    .buttons-featured { display: none; }    
    .hero {
	padding-bottom: 18rem;
	text-align: left;
	height: 325px;
    }
    .product {
	display: block;
	position: absolute;
	top: 2rem;
	right: 3rem;
	max-height: 362px;
	z-index: 3;
    }
    .product + .product {
	top: 4rem;
	display: block;
	max-width: 65.8%;
	right: 0;
	z-index: 2;
	max-height: 338px;
    }
    .product + .product + .product {
	top: 6rem;
	right: -3rem;
	display: block;
	max-width: 53.8%;
	z-index: 0;
    }
    .hero-heading {
	font-size: 2.4rem;
    }
}

/* Fix for iPhone5 landscape view */
@media (min-width: 585px) {
    .buttons-featured { display: block; }
}

/* Larger than tablet */
@media (min-width: 750px) {
    h1,h2,h3 { text-align: left; }
    .mobile-featured { display: none; }
    .buttons-featured { display: block; }
    .navbar-title { display: inline-block; }
    .hero {
	height: 325px;
    }
    .hero-heading {
	font-size: 2.6rem;
    }
    .section-description {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
    }
    .product {
	top: -5rem;
	right: 5rem;
	max-height: 510px;
    }
    .product + .product {
	top: -3rem;
	display: block;
	max-width: 65.8%;
	right: 0;
	z-index: 2;
	max-height: 338px;
	
    }
    .product + .product + .product {
	top: -1rem;
	right: -5rem;
	display: block;
	max-width: 53.8%;
	z-index: 1;
    }  
}

/* Larger than desktop */
@media (min-width: 1000px) {
    h1,h2,h3 { text-align: left; }
    .mobile-featured { display: none; }
    .buttons-featured { display: block; }
    .hero-heading {
	font-size: 3.0rem;
    }
    .product {
	top: -5rem;
	max-height: 615px;
    }
    .product + .product {
	top: -2rem;
	max-height: 370px;
    }
    .product + .product + .product {
	top: 1rem;
	right: -5rem;
	z-index: 0;
	max-height: 300px;
    }
    .delimiters {
	height: 450px;
    }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    h1,h2,h3 { text-align: left; }
    .mobile-featured { display: none; }
    .buttons-featured { display: block; }
    .delimiters {
	height: 550px;
    }
    .hero {
	padding-top: 16rem;
    }
    .product {
	top: -8rem;
	max-height: 615px;
    }
    .product + .product {
	top: -5rem;
	max-height: 370px;
    }
    .product + .product + .product {
	top: -2rem;
	right: -5rem;
	z-index: 0;
	max-height: 300px;
    }
    
}