/* TEMPLATE */

html {font-family: 'Roboto', sans-serif; font-size: 18px; background: #fff; font-weight: 300;}
body {margin: 0; padding: 0;}

a, a:visited , a:active {
	color:#ff7e31;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.5s;
    -moz-transition: all 0.5s; /* Firefox 4 */
    -webkit-transition: all 0.5s; /* Safari and Chrome */
    -o-transition: all 0.5s; /* Opera */
	}
a:hover {color:#e66c25; text-decoration: none;}

/*---Typicals---*/
strong {font-weight: 700;}
.center {text-align: center;}
.clear {clear:both;}
.italic {font-style:italic;}
.uppercase {text-transform: uppercase;}
.inline {display: inline-block;}
.vtop {vertical-align: top;}
.tleft {text-align: left;}
.tright {text-align: right;}
.resp-img {width: 100%; height: auto;}
.shadow {box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);}
button {background: none; border: none; display: inline-block;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*---Containers------*/
.container {margin: 0 auto; max-width: 1600px;}
.container-video {margin: 0 auto; max-width: 1000px; padding: 20px;}
.con-upper-bar {background: #f5f5f5; display: block;}
.con-header {padding: 5px 10px 0px 10px;}
.con-home-level2 {background: url(/images/bkg-faded-2.jpg) center; background-color: #414750; background-repeat: no-repeat; background-size: cover; padding: 90px 0 60px 0;}
.con-footer {background: #f5f5f5; padding: 0 0 100px 0;}
.internal-pad {padding: 20px 20px 60px 20px;}

#home {
    main {
        .container {
            max-width: 100%;
        }
        
        .internal-pad {
            padding: 0;
        }
    }
}

/*--Upper Bar--*/
.upper-bar-flex {display: flex; justify-content: right; padding: 8px 20px 8px 0;}
.upper-bar-flex ul {list-style: none; margin: 0; padding-left: 0;}
.upper-bar-flex li {padding: 0 10px; border-right: 1px solid #535353; display: inline-block;}
.upper-bar-flex li:last-child {border-right: none;}
.upper-bar-flex a {font-size: 14px; color: #2b2b2b; font-weight: normal;}
.upper-bar-flex a:hover {color: #000; font-weight: normal; text-decoration: underline;}

/*--Header--*/
.header-flex {display: flex; justify-content: center; align-items: center; padding: 5px;}
.header-flex-left {order: 1; width: 20%; text-align: center;}
.header-flex-center {order: 1; width: 60%; text-align: center;}
.header-flex-right {order: 1; width: 20%; text-align: right;}
.header-logo {width: 100%; height: auto; max-width: 125px; margin-left: auto; margin-right: auto;}
.search-field {display: inline-block; background: none !important; width: 50% !important; border: 1px solid #bbbbbb !important; border-radius: 5px !important; margin: 0; padding: 0 5px 0 7px; transition: all .5s ease; display: inline-block; vertical-align: top; font-size: 18px; box-shadow: none !important;}
.search-field:focus {width: 100% !important;}
.lower-header {background: #f5f5f5; height: 10px;}

/*---Main Menu---*/
.header-mm {display: block;}
.header-mm ul {list-style: none; margin: 0; padding-left: 0;}
.header-mm li {display: inline-block; position: relative;}
.header-mm a {display: block; padding: 10px 20px; color: #08438f; font-weight: 400; font-size: 20px; transition: all 0.5s; border: 1px solid #fff;}
.header-mm a:hover {color: #08438f; transition: all 0.5s; border: 1px solid #08438f;}

/*---Main Menu Icons---*/
.header-mm-icons {display: none;}
.header-mm-icons ul {list-style: none; margin: 0; padding-left: 0;}
.header-mm-icons li {display: inline-block; position: relative;}
.header-mm-icons a {display: block; padding: 10px 15px; color: #08438f; font-weight: 400; font-size: 20px; transition: all 0.5s; border: 1px solid #fff;}
.header-mm-icons a:hover {color: #08438f; transition: all 0.5s; border: 1px solid #08438f;}

/*--Home--*/
.home-intro {background: url(/images/home-image-4.jpg) center; background-repeat: no-repeat; background-size: cover; text-align: center; padding: 200px 0 200px 0;}
.home-intro-text {padding: 200px 20px 100px 20px; color: #fff; text-shadow: 2px 2px #000; font-size: 70px; font-weight: 700; max-width: 1000px; margin-left: auto; margin-right: auto; opacity: 0.9;}
.home-intro-button a {display: inline-block; color: #fff; padding: 10px 20px; border: 1px solid #fff;}
.home-intro-button a:hover {background: rgb(255,255,255,0.5);}

.home-level2-title {font-size: 46px; color: #fff; font-weight: 700; padding: 0 10px 60px 10px; text-align: center; text-transform: uppercase; opacity: 0.8;}
.home-level2-flex {display: flex; justify-content: center; align-items: center;}
.home-level2-flexbox-1 {order: 1; width: 50%; background: url(/images/tact_kennel-1.jpg) center; background-repeat: no-repeat; background-size: cover; min-height: 500px;}
.home-level2-flexbox-2 {order: 2; width: 50%;}
.home-level2-pad {padding: 20px 50px;}
.home-level2-intro {color: #fff; font-size: 20px; line-height: 28px; font-weight: 400; opacity: 0.9;}
.home-level2-intro ul {}
.home-level2-intro ul li {list-style-image: url(/images/yellow-icon-1.png); padding: 0 0 20px 10px;}
.home-level2-intro ul li span {top: -5px; position: relative;}

/*--Company--*/
.company-title {font-size: 24px; padding: 50px 0 20px 0; border-bottom: 2px solid #d1d1d1; text-align: left;}
.company-flex {display: flex; justify-content: space-around; align-items: top; padding: 60px 0 50px 0; flex-wrap: wrap;}
.company-bio-box {order: 1; width: 40%; text-align: center; padding: 0;}
.company-bio-box-pad {padding: 0 20px;}
.company-bio-image img {max-width: 350px; width: 100%; height: auto; margin-left: auto; margin-right: auto;}
.company-bio-title {padding: 30px 0 30px 0; font-size: 28px; color: #4b4b4b; font-weight: bold;}
.company-bio-subtitle {padding: 0 0 20px 0; font-size: 16px; text-transform: uppercase; color: #4572a4;}
.company-bio-content p {text-align: left;}

/*--FAQ--*/
.faq-section-title {text-align: center; padding: 10px; background: #d9e3ee; font-size: 20px; text-transform: uppercase; margin: 0 auto; max-width: 1000px;}
.collapsible-box {margin: 0 auto; max-width: 1000px;}
.collapsible {color: #000; cursor: pointer; padding: 22px; width: 100%; border: none; text-align: left; outline: none; font-size: 16px; font-weight: 600;}
.active, .collapsible:hover {background-color: #f3f6f9;}
.collapsible:after {content: '\002B'; color: #000; font-weight: 600; float: right; margin-left: 5px;}
.collapsible-box .active:after {content: "\2212";}
.content {padding: 0 25px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: 1px solid #545454;}

/*--Category--*/
.category-flex {display: flex; justify-content: center; align-items: top;}
.category-flex-box {order: 1; width: 24.5%; text-align: center; border: 1px solid #fff; transition: all 0.5s;}
.category-flex-box:hover {border: 1px solid #575757; transition: all 0.5s;}
.category-flex-box img {width: 100%; height: auto; max-width: 500px;}
.category-pad {padding: 15px;}
.category-flex-title {padding: 20px 0;}
.category-flex-title a {color: #000; font-size: 18px; font-weight: 400;}

/*--Product--*/
.product-title-mobile {display: none;}
.product-title-main {display: block;}
.product-upper-flex {display: flex; justify-content: center; align-items: top; flex-wrap: nowrap;}
.product-upper-thumbs {order: 1; padding: 0 10px;}
.product-upper-image {order: 2; width: 50%;}
.product-upper-intro {order: 3; width: 40%; padding: 0 0 0 40px;}

.product-upper-thumbs img {width: 100%; height: auto; max-width: 80px;}
.product-upper-image img {width: 100%; height: auto; max-width: 800px;}
.product-intro-text {padding: 0;}
.product-intro-text ul {margin: 25px 0 0 10px;}
.product-intro-text li {list-style-image: url(/images/grey-icon-1.png); padding: 0 0 10px 5px;}
.product-intro-text li span {top: -10px; position: relative;}
.product-price {font-size: 20px; padding: 0 0 20px 0; font-weight: bold;}
.product-price span {color: green;}
#cartAddQty {padding: 10px; margin-right: 20px;}
.product-thumbs {display: block; margin: 0 0 5px 0; cursor: pointer;}
.product-buy-more {padding: 10px 0;}
.product-view-details {padding: 10px 0 20px 0;}

.product-upgrades {border: 1px solid #d1d1d1; padding: 20px 20px 0 20px; margin: 0 0 20px 0;}
.product-single-upgrade {padding-bottom: 30px;}
.product-single-upgrade label {display: inline-block; padding: 0 15px 10px 0; font-weight: bold;}
.product-single-upgrade select {padding: 5px 10px 5px 5px;}

.product-general-flex {display: flex; justify-content: center; align-items: top; flex-wrap: nowrap; padding: 10px 0 0 0;}
.product-gf-1 {order: 1; width: 50%; padding: 0 20px 0 0;}
.product-gf-2 {order: 2; width: 50%;}
.product-gf-2 img, .product-gf-3 img {width: 100%; height: auto; max-width: 1000px; object-fit: fill;}
.product-gf-1 h2 {font-size: 30px; color: #08438F; font-weight: bold; border-bottom: 1px solid #08438F; width: 80%; text-transform: uppercase; font-style: italic; padding: 0 0 20px 0; margin: 0;}
.product-gf-1 h3 {font-style: italic;}
.product-gf-1 p {line-height: 1.5em;}
.product-gf-1 ul {margin: 30px 0 0 10px;}
.product-gf-1 li {list-style-image: url(/images/grey-icon-1.png); padding: 0 0 20px 10px;}
.product-gf-1 li span {top: -10px; position: relative;}
.product-large-show {display: block;}
.product-mobile-show {display: none;}
.product-mobile-show p {line-height: 1.5em;}
.product-lower-banner {background: #ababab; color: #fff; text-transform: uppercase; padding: 10px 10px 10px 20px; font-size: 18px; margin: 60px 0 20px 0; font-weight: bold;}

.product-gf-3 {order: 1; width: 50%;}
.product-gf-4 {order: 2; width: 50%; padding: 0 0 0 20px;}

/*--Account--*/
.account-squeeze {max-width: 1000px; margin: 0 auto;}
.account-squeeze .tablinks {text-align: center;}
.account-squeeze .tab {overflow: hidden; border-bottom: 1px solid #ccc; display: flex; justify-content: center; align-items: center;}
.account-squeeze .tab button {background-color: inherit; order: 1; border: none; outline: none; cursor: pointer; padding: 15px 30px; transition: 0.3s; font-size: 18px; text-align: center; border-top: 2px solid #fff; color: #000;}
.account-squeeze .tab button:hover {border-top: 2px solid #000;}
.account-squeeze .tab button.active {background-color: #ebf0f6;}
.account-squeeze .tabcontent {display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
#Profile, #Orders, #Addresses {padding: 50px 0 0 0;}
.account-profile div {padding: 0 0 20px 0;}
.account-address {text-align: center;}
.account-address-box {display: inline-block; vertical-align: top; padding: 20px; border: 1px solid #d1d1d1; margin: 10px;}
.acc-add-box-1 {padding: 0 0 10px 0;}
.acc-add-default {padding: 6px 10px; font-style: itaic; font-weight: 300; font-size: 14px; color: #7692b6; display: inline-block; margin: 10px 0 0 0; border: 1px solid #7692b6;}
#Orders table {width: 100%; border: 1px solid #d1d1d1; text-align: left; border-collapse: collapse; font-size: 16px;}
#Orders td {padding: 0; margin: 0;}
#Orders th, #Orders td {padding: 20px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1;}
#Orders span {display: none;}

.account-edit {text-align: center;}
.account-edit div {padding: 5px;}

.address-flex {display: flex; justify-content: center; align-items: flex-start;}
.address-flex-box {order: 1; padding: 15px; border: 1px solid #d1d1d1; margin: 10px;}
.address-flex-box .field div {padding: 3px;}
.address-default-area {border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; padding: 20px 0; text-align: center; margin: 20px 0;}
.address-default-box {display: inline-block; margin: 0 20px;}
.address-default-box div {padding: 5px 0;}

/*--Forms--*/
#formSection11 {text-align: center; border-top: 1px solid #d1d1d1; max-width: 500px; margin: 0 auto; padding: 30px 0 0 0;}
#formSection11 .options {text-align: left; margin: 0 auto; max-width: 200px; padding: 15px 0 0 0;}
#formSection11 .required {color: #2c5d9b; font-weight: 600;}
#formSection11 textarea {min-height: 200px;}
#formSection10 .field div {padding: 5px;}
#formSection10 .field input {padding: 5px; min-width: 200px;}
#formSection9 {text-align: center;}
#formSection7 {text-align: center; max-width: 450px; margin: 0 auto;}
#formSection7 .formSectionTitle {font-size: 20px; text-transform: uppercase; font-weight: 300px; padding: 30px 0; border-top: 2px solid #d1d1d1; margin: 45px 0 0 0; color: #555;}

/*--Search--*/
.search-page-section {border-top: 1px solid #a9a9a9; padding: 20px; margin-bottom: 40px;}
.search-page-title {font-size: 22px; font-weight: 400; text-align: center; padding: 0 0 30px 0;}
.search-page-flex {display: flex; justify-content: center; align-items: flex-start;}
.search-page-box {order: 1; width: 24.5%; text-align: center; border: 1px solid #fff; transition: all 0.5s;}
.search-page-box:hover {border: 1px solid #575757; transition: all 0.5s;}

.search-page-box img {width: 100%; height: auto; max-width: 500px;}
.search-page-box-pad {padding: 15px;}
.search-page-box-title {padding: 20px 0;}
.search-page-box-title a {color: #000; font-size: 18px; font-weight: 400;}
.search-page-box-page-title {font-size: 22px; padding: 0 0 20px 0;}

/*--Login--*/
.login-area {text-align: center; padding: 0 0 30px 0;}
.login-area-1 {padding: 0 0 10px 0; display: inline-block;}
.login-area-2 {display: inline-block;}
.login-area-3 {border-top: 1px solid #ccc; padding: 20px 0 50px 0; text-align: center; margin: 0 auto; max-width: 300px;}
.login-area-3 a {font-weight: 300; font-size: 16px; color: #5f5f5f; text-decoration: none;}
.login-area-3 a:hover {color: #000;}

/*--Footer--*/
.footer-menu {padding: 60px 0; text-align: center;}
.footer-menu ul {list-style: none; margin: 0; padding-left: 0;}
.footer-menu li {display: inline-block; position: relative;}
.footer-menu a {display: block; padding: 10px 20px; color: #000; font-weight: 400; font-size: 16px; transition: all 0.5s; border: 1px solid #f5f5f5;}
.footer-menu a:hover {color: #000; transition: all 0.5s; border: 1px solid #3b3b3b;}

.footer-social {padding: 0 0 60px 0; text-align: center; margin: 0 auto;}
.footer-social-text {color: #000; font-size: 18px; max-width: 500px; border-bottom: 1px solid #000; padding: 0 0 10px 0; margin: 0 0 10px 0; display: inline-block;}
.footer-social-link ul {list-style: none; margin: 0; padding-left: 0;}
.footer-social-link li {display: inline-block; position: relative;}
.footer-social-link a {display: block; padding: 10px 20px; color: #000; font-weight: 400; font-size: 30px; transition: all 0.5s; border: 1px solid #f5f5f5;}
.footer-social-link a:hover {color: #000; transition: all 0.5s; border: 1px solid #3b3b3b;}

.footer-flex {display: flex; justify-content: center; align-items: center; text-align: left;}
.footer-flex-1 {order: 1; padding: 10px 30px 10px 10px;}
.footer-flex-1 img {width: 100%; height: auto; max-width: 150px; margin-left: auto; margin-right: auto;}
.footer-flex-2 {order: 1; color: #000; font-size: 16px; line-height: 28px;}

/*--Mobile-Menu--*/
.header-mobile-menu {display: none;}

.hamburger-icon {position: absolute; top: 2.4vh; right: 5vw; padding-bottom: 2vh; z-index: 110; cursor: pointer;}
.hamburger-icon span {height: 3px; width: 30px; border-radius: 5px; background-color: #08438f; display: block; margin: 5px 0px 5px 0px; transition: 0.7s ease-in-out; transform: none;}
#openmenu:checked ~ .menu-pane {left: -5vw; transform: translateX(-5vw);}
#openmenu:checked ~ .body-text {display: none;}
#openmenu:checked ~ .hamburger-icon span:nth-of-type(2) {transform: translate(0%, 175%) rotate(-45deg);background-color: #08438f;}
#openmenu:checked ~ .hamburger-icon span:nth-of-type(3) {transform: rotate(45deg); background-color: #08438f;}
#openmenu:checked ~ .hamburger-icon span:nth-of-type(1) {opacity: 0;}
#openmenu:checked ~ .hamburger-icon span:nth-of-type(4) {opacity: 0;}
div.menu-pane {background-color: white; position: absolute; transform: translateX(-110vw); transform-origin: (0, 0); width: 105vw; height: 100%; transition: 0.6s ease-in-out; z-index: 100;}
.menu-pane p {color: black; font-size: 0.6em;}
.menu-pane nav {padding: 2% 0 0 10%;}

ul#menu4 {transition: 0.5s ease-in-out;}
ul#menu4  {list-style: none; margin: 40px 0 0 0; padding: 0 0 0 16%;}
ul#menu4 li {padding-top: 5px; padding-bottom: 20px; margin-left: 10px; font-size: 18px;}
#menu4 a {color: #000; transition: all 0.5s; border: 1px solid #fff; text-decoration: none; padding: 10px;}
#menu4 a:hover {color: #000; transition: all 0.5s; border: 1px solid #000;}

ul#menu4 li, a, span {transition: 0.5s ease-in-out;}
/*
.menu-pane ul {padding: 0 0 0 8%; margin: 0; list-style: none;}
.menu-pane li {padding-top: 5px; padding-bottom: 20px; margin-left: 10px; font-size: 0.9em;}
.menu-pane li:first-child {font-size: 1.1em; margin-left: -10px;}
.menu-links li a {color: black; text-decoration: none; border: 1px solid #fff;}
.menu-links li:hover a {color: #FFAB91; border: 1px solid #000;}
.menu-links li:first-child:hover a {color: black;}
#QC-info {background-color: #FFAB91; border: 2px solid; border-color: #FFAB91; display: block; opacity: 0;}
.menu-links li:first-child:hover #QC-info {opacity: 1;}
.menu-links li:first-child:hover #DC-info {opacity: 1;}
#DC-info {background-color: #FFAB91; border: 2px solid; border-color: #FFAB91; display: block;opacity: 0;}
.menu-links li:first-child a {padding: 5px;}
*/

input.hamburger-checkbox {
  position: absolute;
  z-index: 3;
  top: 5vh;
  left: 5vw;
  width: 10vw;
  opacity: 0;
  height: 6vh;
}

/* TYPICALS */
hr {
    background: transparent;
    border: 0;
    border-bottom: 3px solid #e1eaf3;
    clear: both;
    height: 0;
    margin: 25px 0;
    padding: 0;
}

h1 {font-size: 28px; font-weight: 500; margin: 0; padding: 20px 0 30px 0; text-align: center;}
h2 {font-size: 20px; font-weight: 500; margin: 0; padding: 10px 0;}
ul li {padding: 0 0 15px 0;}

.bold {
    font-weight: 700;
}


/* MENUS */


/* cart */

#menuItem195::after {
    content: attr(data-count);
    font-size: 14px;
    font-weight: 600;
    margin-left: 4px;
}


/* BUTTONS */

.btnBlue,
.btnGreen,
.btnRed,
.btnGray {
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    line-height: 17px;
    margin-top: 5px;
    outline: 0;
    padding: 15px 25px;
    text-decoration: none;

    &:visited {
        color: #fff;
    }
    
    i {
        margin-right: 8px;
    }
    
    &.btnSm {
        font-size: 14px;
        padding: 8px 12px;
    }
}

.btnBlue,
.btnGreen,
.btnRed {
    &:hover {
        color: #fff;
    }
    
    &:active {
        box-shadow: inset 0 0 10px 0 rgb(0 0 0 / 40%);
        filter: brightness(1);
    }
}

.btnBlue {
    background: #08438f;
    
    &:hover {
        background: #467be7;
    }    
}

.btnGray {
    background: #999;
    color: #ddd;
    cursor: not-allowed;
}

.btnRed {
    background: #b90f0f;
    
    &:hover {
        background: #ed3c3c;
    }
}


/* DIALOG */

body:has(dialog[open]) {
    filter: blur(5px) grayscale(.8);
    overflow: hidden;
}

dialog {
    border: 0;
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgb(0 0 0 / 40%);
    color: #000;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 500px;
    min-width: 400px;
    outline: 0;
    padding: 35px;
    
    .dialogBody {
        max-height: 500px;
        overflow-y: auto;
    }
    
    .dialogBtns {
        margin-top: 30px;
        text-align: right;
        
        button {
            border-radius: 20px;
        
            &:hover {
                background: #467be7;
            }
            
            &:active {
                box-shadow: var(--shadowInset);
            }

            &+button {
                margin-left: 15px;
            }
        }
    }
    
    &::backdrop {
        background: rgb(150 150 150 / 50%);
    }
}