/*
Theme Name: PremierVet
Theme URI: http://premiervetsa.com
Author: Taps
Author URI: http://premiervetsa.com
Description: Premier Veterinary Centre 
Version: 1

*/

*{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    text-decoration: none;
    box-sizing: border-box;
}

#browser{
    color: #fff;
    width: 100%;
    z-index: 99;
    height: auto;
    padding: 15px;
    text-align: center;
    position: absolute;
    top: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,.6);
    
}

.balert{
    width: 70%;
    z-index: 99;
    height: auto;
    padding: 15px;
    margin: 20px auto;
    text-align: center;
    position: sticky;
    border-radius: 5px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font: 500 1.2em/1.5 'Questrial', sans-serif;
    top: 0; 
    background-color: #F93;
}

.centerall{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


html,
body{
    height: 100%;
}

body{
    width:100%;
    margin: auto;
    line-height:1.5;
    transition: 0.3s;
    position: relative;
    color: #071627; 
    font: 500 1em/1.5 'Questrial', sans-serif;
    display: block;
    background-image: url('http://localtaggs.net/vetimgs/dogcat.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    box-sizing: border-box;
}


#wrapper{
    position: relative;
    padding-bottom: 150px;
    
}

#topbar{
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); 
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: auto;
	height: 30px;
	width: 200px; 
	background-color: transparent;
}

#langopt{
	display: grid;
	grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); 
    grid-template-rows: none;
}

#book{
	display: flex;
	align-content: center;
	justify-content: center;
}

#book a{
	width: 100%;
	display: block;
	text-align: center;
	background-color: #34347d;
}

#mbcall{
	display: flex;
	align-content: center;
	justify-content: center;
}

#mbcall a{
	width: 100%;
	display: block;
	text-align: center;
	background-color: #d43141;
}

#book,
#mbcall{
	padding: 4px;
}

#book a,
#mbcall a{
	color: #fff;
	height: 22px;
	font-size: .9em;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}


#container{
    height: 100%;
    margin-bottom: 50px;
}

/* ---- Header ---- */
#banner{
    display: block;
    overflow: hidden;
    padding-bottom: 0px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    background-color: rgba(255, 255, 255, 0.9);
}

#brandgrid{
    width: 100%;
    display: grid;
    grid-gap: 10px;
    max-width: 1100px;
    margin: 0px auto;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    grid-template-columns: 145px auto;
    grid-template-rows: auto ;
    grid-template-areas: "logo title";
}

#header{
    width: 100%;
    height:auto;
    margin-bottom: 50px;
    margin-bottom: 0px;	
	}

#mission{
    width: 100%;
    color: #FFF;
    display: block;
    max-width: none;
    margin: 0px auto;
    text-align: center;
    position: relative;
    padding: 10px 20px;
    font-style: italic;
    background-color: #222;
}


#sitelogo{
    grid-area: logo;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sitelogo img{
    width: 100%;
    display: block;
    margin: 0px auto;
    max-width: 180px;
    border: 0px #00aed0 solid;
}
	
#title{
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#tagline{
    color: #3b8bae;
    padding: 2px;
    text-align: center;
    font-style: italic;
    margin-bottom: 15px;
    width: 100%;
    overflow: hidden;
    font-weight: 600;
    box-sizing: border-box;
    text-shadow:0 1px 1px rgba(255,255,255,0.2);
    font: 500 1em/1.5 "Lato", sans-serif;
}

#title{
    grid-area: title;
}

#title h1{ 
    width: auto;
    text-align: left;
    grid-area: content;
    overflow: hidden;
    color: #308ee7;
    margin: 0px !important;
    text-transform: uppercase;
    box-sizing: border-box;
    font: 400 2em/1.2 "Lato", sans-serif;
}
	
#title a{
    color: #5f9ea0;
}

#header a {
    color: #222;
    padding: 0 0 0 0;
    text-decoration: none;
}

#header a:hover {
    color: #333;
    padding: 0 0 10px 0;
    text-decoration: none;
}

.description {
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    margin: 0 0;
    text-align: center;
}

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

.notices{
    width:100%;
    margin: auto;
    line-height:1.5;
    transition: 0.3s;
    padding: 10px 5px;
    text-align: center;
    position: relative;
    border-radius: 0px;
    margin-bottom: 10px;
    background-color: #dc143c;
    font: 500 1em/1.5 'Questrial', sans-serif;
}

.notices a{
	color: #fff;
	font: 500 1em/1.5 'Questrial', sans-serif;
}

#footer {   
    clear: both;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    position: absolute;
    min-height: 100px;
    padding: 15px 0px;
    bottom: 0; left: 0; right: 0;
    border-top: 1px #ddd solid;
    background-color: #5f9ea0;
}

#colophon {
    padding: 0 0;
    margin-top: -4px;
    overflow: hidden;
    border-top: 0px solid #ccc;
}

#site-info {
    color: #FFF;
    width: 100%;
    margin: 20px 0px;
    font-weight: bold;
    text-align: center; 
    font: 110%/1.5 'Questrial', sans-serif;
}

.col-4,
.col-4 ul,
.col-4 ul li{
    display: inline-block;
}

#site-info a {
    color: #eee;
    text-decoration: none;
}

#link-space{
    margin-top: 30px;
	}
#site-generator {
    font-style: italic;
    position: relative;
}
#site-generator a {
    color: #666666;
    display: inline-block;
    line-height: 16px;
    padding-left: 20px;
    text-decoration: none;
}

#site-generator a:hover {
    text-decoration: underline;
}



h2, h3, h4, h5, h6 {
    font-family: 'Questrial', sans-serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 220%;
    text-align: center;
    margin-bottom: 0.5em;
    font-family: 'Questrial', sans-serif;
}

.frontpage{
    display: block;
    margin: 5px auto;
    padding: 10px 20px;
    border: 0px #ddd dashed;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#promo{
        width: 100%;
        display: grid;
        grid-gap: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        grid-template-columns: auto auto; 
        grid-template-rows: auto ;
        grid-template-areas: "prmimg prmbtn";
        margin: 0px auto;
        background: rgba(255,255,251, 0.4);
}

#promoimg{
    max-height: 150px;
    grid-area: prmimg;
}

#promoimg img{
    display: block;
    max-height: 150px;
    margin: auto auto;
}

#promotxt{
    height: 150px;
    text-align: center;
    padding: 5% 10px;
    grid-area: prmtxt;
    text-transform: uppercase;
    font: 3.5vw/1.5 'Questrial', sans-serif;
}

#txt1{
    color: #0faffb;
}

#txt2{
    color: #c71585;
}

#promobtn{
    width: 350px;
    grid-area: prmbtn;
    display: flex;
    align-items: center;
    justify-content: center;
}

#promobtn a{
    width: 100%;
    display: block;
    text-decoration: none;
}

#promobtn button{
    width: 90%;
    border: none;
    color: #ffffff;
    display: block;
    cursor: pointer;
    margin: auto auto;
    padding: 5px 10px;
    vertical-align: central;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.4);
    font: 1.1em/1.5 'Questrial', sans-serif;
    background: linear-gradient(-90deg, #f40f9a, #018ed3, #23A6D5, #0faffb);
    background-size: 500% 500%;
    -webkit-animation: swoosh 15s ease infinite;
    -moz-animation: swoosh 15s ease infinite;
    animation: swoosh 15s ease infinite;
}

.home-content {
    width: 100%;
    display: block;
    overflow: hidden;
    max-width: 1100px;
    margin: 0px auto;
    margin-bottom: 25px;
    padding: 10px 30px;
    border: 0px #ddd dashed;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.9);
}

.hints-grid{
   height: 100%;  
   display: grid;
   grid-gap: 5px;
   width: 1100px;
   padding-left: 5px;
   padding-right: 5px;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 
   grid-template-rows: none;
   grid-auto-flow: row;
   grid-auto-rows: auto;
   margin: 10px auto;
}

.hintbox{
    color: #fff;
    position: relative;
    padding: 5px 10px;
    text-align: center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-top: 0px #eee solid;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    background-color: #00bfff;
}

.hintbox ul li{
    text-align: left;
    margin-left: 15px;
}

.hintdata{
    display: none;
    z-index: 4;
    color: #074272;
    text-align: left;
    min-height: 295px;
    padding: 20px 20px;
    position: absolute;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    top: 105%; left: 0; right: 0;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    background-color: #ffffff;
}

.hintx{
    margin: 0px;
    color: #fff;
    width: 25px;
    height: 25px;
    padding: 1px;
    display: none;
    cursor: pointer;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    top: 5px; right: 5px;
    background-color: #ffa500;
    font: 100%/1.4 'Questrial', sans-serif;
}

.downtri{
    font-size: 1.2em;
}

.info-grid{
   height: 100%;
   width: 100%;
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
   grid-template-rows: none;
   grid-auto-flow: row;
   grid-auto-rows: auto; 
   margin: 0px auto;
   margin-bottom: 15px;
}

.info-tile{
    overflow: hidden;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
     background-color: #ffffff;
     box-shadow: 0px 0px 0px #fff;
}

.info-tile img{
    display: block;

}

.info-tile h3{
    color: #5f5f5f;
    font-size: 100%;
    font-weight: 600;
    text-align: center;
    margin: 15px auto;
}

#shopdata{
   width: 100%;
   display: grid;
   max-height: 350px;
   grid-template-columns: repeat(minmax(230px, 1fr)); 
   grid-template-areas: "pcrwinfo pcrwmap";
   grid-template-rows: auto auto;
   grid-auto-flow: row;
   grid-auto-rows: auto; 
   margin: 0px auto;
   margin-bottom: 6px;
}

#map{
    width: 70vw;
    height: auto;
    grid-area: pcrwmap;
}

#map iframe{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --in-content-page-background: transparent !important;
  --in-content-box-background: transparent !important;
}

#shopinfo{
    width: 30vw;
    height: auto;
    padding: 10px;
    display: flex;
    grid-area: pcrwinfo;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
}

:host,
:root {
  --in-content-page-background: transparent !important;
  --in-content-box-background: transparent !important;
  
}

#shopinfo .wizrate{
    margin: 0px
}


.contentbox{
    display: block;
    margin: 15px auto;
    padding: 10px 20px;
    border: 0px #ddd dashed;
}

.entry-content h1 {
    font-size: 150%;
    text-align: left;
    margin-bottom: 0.5em;
    font-family: 'Questrial', sans-serif;
}

.entry-title{
    font-size: 180%;
    text-align: left;
    margin-bottom: 1em;
    font-family: 'Questrial', sans-serif;
}

h2 {
    font-size: 140%;
    text-align: center;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 150%;
    margin-bottom: 0.5em;
}

p,
.para{
	margin:0;
	padding: 0 0 1em 0;
    font: 110%/1.5 'Questrial', sans-serif;
}

#content p{
	
}

.white{
	color: #fff !important;
	}

#header{
	width: 100%;
	display: block;
}
	
.banner{
	color: #444; 
	padding: 1em 3% 1em 3%;
	margin: 0 auto 1em auto;
}

.wrapper {
	color: #444; 
	padding: .4em 2% .4em 2%;
	margin: 0 auto 1em auto;
}

#wizservice{
	width: 100%;
	display: block;
	margin: 15px auto;
}

.offers{
	width: 100%;
	display: grid;
	grid-gap: 10px;
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-rows: none;
	grid-auto-flow: row;
	grid-auto-rows: auto;
	margin: 10px auto;
        margin-bottom: 10px;
	padding-left: 0;
	box-sizing: border-box;
	list-style: none !important;
}

.offers li{
    text-align: center;
    font-size: 1em;
    display: inline-block;
}


/* ------ Navbar CSS ----- */
#navtop{
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    background-color: #070707;
}

nav{
    color:#071627;
    width:100%;
    height:auto;
    display: block;
    padding-top:0px;
    overflow: hidden;
    text-align:center;
    z-index: 9;
    position: sticky;
    top: 0;
    background-color: transparent; /*#a0deed;*/
    border-top: 0px #0e0f11 solid;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
}

#navline{
    width: 100%;
    border-top: 0px #F93 solid;
	}

#navbar {
    height: 47px;
    color: #fff;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;	
    border: 0px solid #D4D4D4;	
}

.menu:hover{
    cursor: pointer;
    background-color: #5f9ea0;
}

#navbar ul {
    margin: 0px;
    font-size: .9em;
    list-style: none;
    padding-left: 0px;
    padding-right: 0px;
}

#navbar ul li {
    margin: 0;
    float: left;
    display: inline-table;
    position: relative;
    transition: 0.3s;
    text-transform: uppercase;
    border-right: 0px #09C groove;
    font: 600 100%/1.5 'Questrial', sans-serif;
}

#navbar ul li:first-child {
    height:inherit;
    border-left: none;
}

#navbar ul li:last-child {
    height:inherit;
    border-right: none;
}
	
#navbar a {
    color: #fff;
    display: block;
    line-height: 3.3em;
    padding: 0 1.2125em;
    text-decoration: none;
    border-right: 0px #cbe0ee solid;
}

#navbar ul ul {	
    display: none;
    float: right;
    margin: 0;
    position: absolute;
    top: 53px;
    left: 0px;
    min-width: 168px;
    z-index: 99999;
    transition: 0.3s;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

#navbar ul ul ul {
    left: 100%;
    top: 0;
    transition: 0.3s;
}

#navbar ul ul a {
    color: #FFF;
    font-size: .9em;
    height: 53px;
    line-height: 3.888em;
    padding: 10px 10px;
    min-width: 168px;
    background-color: #eee;
    border-bottom: 0px dotted #ddd;
    font: 500 100%/1.5 'Questrial', sans-serif;
}

#navbar li:hover > a,
#navbar a:focus {
    color: #c09700;
    line-height: 3.3em;
    padding: 0 1.2125em;
    border-bottom: 0px #00bfff solid;
    background-color: rgba(255, 255, 255, 0.9);
}

#navbar ul ul :hover > a{
    background: none;
    transition: 0.3s;
}

#navbar .children li{
    border-right: 0 !important;
    background-color: #fff;
    text-align: left;
    
    font: 500 100%/1.5 'Questrial', sans-serif;
}

#navbar .children a{
    color: #074272;
    display:block;
    clear: both;
    height: 53px;
    margin-top: 2px;
    font-weight: 600;
    margin-bottom: 2px;
    transition: 0.3s;
    line-height: 3.3em;
    padding: 0 1.2125em;
    background: none;
    position: relative;
    z-index: 99999999;
    background-color: transparent;
    border-bottom: 0px #F93 solid;
}
	
#navbar .children a:hover{
    color: #fff;
    line-height: 3.3em;
    padding: 0 1.2125em;
    border-right: none;
    border-bottom: 0px #F93 solid;
}

#navbar ul li:hover > ul {
    display: block;  
}

#navbar .current-menu-item > a,
#navbar .current-menu-ancestor > a,
#navbar .current_page_ancestor > a {
    background: none;
}

#navbar .current_page_item > a{
    color: #5f9ea0;
    background-color: #6da6a7; 
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
    background-color: rgba(255, 255, 255, 0.9);
}

#navbar .current_page_item > a:hover{
    color: #c09802;
}

/* Menu Addition */
#navbar ul ul li .children > a {
    border-top: 0px solid #0082e7;
}

#navbar ul ul li .children > a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0 1px 0 #1b9bff;
    -webkit-box-shadow: 0 0px 0 #1b9bff;
    box-shadow: 0 1px 0 #1b9bff;
}

#navbar ul ul li .children:hover > a {
    display: block;
    padding: 0 1.2125em;
    line-height: 3.3em;
    -moz-border-radius: 0 0 0 3px;
    -webkit-border-radius: 0 0 0 3px;
    border-radius: 0 0 0 3px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* fa css*/
.menu ul li a:before {
    font-family: fontAwesome;
    content: '';
    margin-right: 4px;
}
#navbar ul li + li a:before {
	 font-family: fontAwesome;
	 content: '';
	 margin-right: 4px;
}
#navbar ul li + li + li a:before {
	  font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

#navbar ul li + li + li + li a:before {
	font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

#navbar ul li + li + li + li + li a:before {
	font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

#navbar ul li + li + li + li + li + li a:before {
	font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

#navbar ul li + li + li + li + li + li + li a:before {
	font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

#navbar ul li + li + li + li + li + li + li + li a:before {
	font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

#navbar ul li + li + li + li + li + li + li + li + li a:before {
	font-family: fontAwesome;
	  content: '';
	  margin-right: 4px;
}

.hidemenu,
.m-navgrid {
    display: none;
}

.hidemenu,	
.slidemenu{
        width:100%;
        color:#FFF;
        clear: both;
        height: 50px;
        cursor:pointer;
        text-align: left;	
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.3);
        }
		
.hidemenu ul li,		
.slidemenu ul li{
        border-bottom: 0px solid #ccc;
}

.hidemenu ul li a,		
.slidemenu ul li a{
        padding: 0 1.2125em;
        line-height: 3.888em;
	   
}
	   
.hidemenu:hover,				
.slidemenu:hover{
    color:#eee;

}

.mainnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 120%;
}

.mainnav ul li{
	font-size: 100%;
	padding: 10px 5px;
	font-weight: 500;
	border-bottom: 1px #ddd dashed;
	font-family: 'Questrial', sans-serif;
	}

.mainnav a:link, .mainnav a:visited {
	text-decoration: none;
	color: #444;
}

/*End Common Style */
.mainnav {
	grid-area: nav;
	border: 0px #ddd dashed;
}

.gen-shadow{
     box-shadow: 1px 1px 2px #aaa;
}

.white-bg{
     background-color: #fff;
}

.misc-block{
    padding: 10px;
    grid-area: foot;
    border: 0px #ddd dashed;
    background-color: #fff;
    box-shadow: 1px 1px 2px #aaa;
}

.radius-3{
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.radius-top-3{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    -moz-border-top-left-radius: 3px;
    -moz-border-top-right-radius: 3px;

    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
}

.list-grid{
   width: 100%;  
   display: grid;
   grid-gap: 10px;
   overflow: hidden;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
   grid-template-rows: none;
   grid-auto-flow: row;
   grid-auto-rows: auto; 
   margin: 10px auto;
   margin-bottom: 10px;
   box-sizing: border-box;
   list-style:none;
}

.list-grid li{
    overflow: hidden;
    padding: 10px 15px;
    box-sizing: border-box;
    border: 1px #eee solid;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    background-color: rgba(255, 255, 255, 0.8);
}


.bizinfo h3{
    color: #fff;
    font-size: 110%;
    padding: 15px 10px;
    text-align: center;
    margin-bottom: 15px;
    background-color: #071627;
    border-bottom: 0px #ccc solid;
}

.wizrate {
    width: 150px;
    height: 26px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    margin: 0px auto;
    background-color: #ccc;
}

.bgscale {
    margin: 0;
    padding: 0;
    border: 0;
    height: 26px;
    width: 150px;
    background-color: #F15722;
    position: absolute;
}

.clrstars {
    width: 150px;
    height: 26px;
    object-fit: contain;
    background: url(http://localtaggs.net/vetimgs/stars.png);
    position: absolute;
}

#hrshdr{
    color: #fff;
    font-size: 110%;
    padding: 15px 10px;
    text-align: center;
    margin-bottom: 15px;
    background-color: #071627;
    border-bottom: 0px #ccc solid;
}

.ourhrs{
    color: #071627;
}

#hours,
#contact{
    text-align: center;
    padding: 10px 20px;
    margin-bottom: 15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#hours{
    background-color: transparent;
}

#search{
   padding: 10px 5px;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}

#bzname,
#subhead{
    color: #003366;
    font-size: 110%;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#location{
    font-size: 100% !important;
}

.hrsh4 {
    color: #006187;
    display: block;
    font-size: 105%;
    padding-bottom: 8px;
    text-transform: uppercase;
}

#hours p{
    color: #03081f;
    padding: 5px 0px !important;
    background-color: transparent;
}

.toolbar{
        padding: 5px;
	grid-area: bar;
        background-color: #fff;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 1px 1px 2px #ddd;
}

.content {
        width: 100%;
        margin: 15px auto;
        max-width: 1000px;
        padding: 10px 20px;
	grid-area: content;
	border: 0px #ddd dashed;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
}

.sidebar{
        padding: 0px;
        display: block;
        margin-bottom: 19px;
	grid-area: sidebar;
	border: 0px #ddd dashed;    
}

.smedia{
        padding: 0px;
	grid-area: social;
	border: 0px #ddd dashed;    
}

.space{
        padding: 0px;
	grid-area: space;
	border: 0px #ddd dashed;    
}

.navtools{
        padding: 0px;
	grid-area: tools;
	border: 0px #ddd dashed;    
}

#callnow{
    display: none;
}

#call{
    color: #fff;
    display: block;
	font-size: 1.2em;
    padding: 5px 4px;
    margin-top: -15px;
    text-align: center;
    background: linear-gradient(-90deg, #99c24d, #018ed3, #23A6D5, #23D5AB);
    background-size: 500% 500%;
    -webkit-animation: swoosh 10s ease infinite;
    -moz-animation: swoosh 10s ease infinite;
    animation: swoosh 10s ease infinite;
}

#callup{
    width: 66%;
    color: #fff;
    display: none;
    position: fixed;
    z-index: 1;
    margin: 10px auto;
    padding: 3px 4px;
    text-align: center;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    bottom: 0; left: 0; right: 0;
    font: 600 .95em/1.5 'Questrial', sans-serif;
    background: linear-gradient(-90deg, #071627, #018ed3, #23A6D5, #00bfff, #071627);
    background-size: 500% 500%;
    
}

#callup a{
    color: #fff;
    display: inline-block;
    padding: 5px 4px;
}

#callup .fa-phone{
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
   
}

#callnow .fa-phone{
    font-size: 1.4em;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
   
}

#directions button{
    color: #fff;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    border-radius: 100%;
    border: 0px #fff solid;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    background: linear-gradient(-90deg, #071627, #018ed3, #23A6D5, #800080);
    background-size: 500% 500%;
    -webkit-animation: swoosh 15s ease infinite;
    -moz-animation: swoosh 15s ease infinite;
    animation: swoosh 15s ease infinite;
}

#callnow button{
    color: #fff;
    width: 30px;
    height: 30px;
    margin-left: 0px;
    border-radius: 100%;
    border: 2px #fff solid;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    background-color: transparent;
    
}

@media only screen and (max-width: 1000px) {
    
    .content-grd{
        display: grid;
        grid-gap: 15px;
        grid-template-columns: auto; 
        grid-template-rows: auto ;
        grid-template-areas: "content" 
            "sidebar";
        max-width: 1000px;
        margin: 10px auto;
        border: 0px #ddd dashed;
    }
    
    .tools-grid{
        width: 100%;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: auto auto auto; 
        grid-template-rows: auto ;
        grid-template-areas: "social tools space";
        margin: 0px auto;
    }
    
    .hidemenu,
    .slidemenu{
	display: none !important;
    }
    
    #navbar ul li{
	display: block !important;
    }
    
    #promo{
        width: 100%;
        height: auto;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto; 
        grid-template-rows: auto;
        grid-template-areas: 
            "prmimg prmbtn";
        margin: 0px auto;
        background: rgba(255, 255, 251, 0.4);
    }
    
    #promotxt{
        width: 100%;
        grid-area: prmtxt;
        display: block;
    }
    
    #promoimg{
        grid-area: prmimg;
        
    }
    
    #promobtn{
        grid-area: prmbtn;
        width: 50vw;
    }
    
    #promobtn button{
        width:70%;
        
    }
}

@media only screen and (min-width: 700px) and (max-width: 980px){
    .wrapper {
        display:grid;
        width: 90%;
        grid-gap: 10px;
        grid-template-columns: 25% 5% auto ; 
        grid-template-rows: auto ;
        grid-template-areas: "";
    }
    
    .wrapper {
        display:grid;
        width: 90%;
        grid-gap: 10px;
        grid-template-columns: 25% 5% auto ; 
        grid-template-rows: auto ;
        grid-template-areas: ". . subhead"
        "nav . quote"
        "nav . feature"
        "nav . content" ;
    }
    
    .sitelogo {
        width: 100%;
        display: block;
        position: absolute;
        margin: 0px auto;
        max-width: 280px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #promo{
        width: 100%;
        height: auto;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto; 
        grid-template-rows: auto;
        grid-template-areas: 
            "prmimg" 
            "prmbtn";
        margin: 0px auto;
        background: rgba(255, 255, 251, 0.4);
    }
    
    #promotxt{
        width: 100%;
        grid-area: prmtxt;
        display: block;
        font: 5vw/1.5 'Questrial', sans-serif;
    }
    
    #promoimg{
        grid-area: prmimg;
        width: 100%;
    }
    
    #promobtn{
        grid-area: prmbtn;
        width: 100%;
        padding: 3% 10px !important;
    }
    
    #promobtn button{
        width:70%;
        display: block;
    }
	
}


@media only screen and (min-width: 320px) and (max-width: 699px){
    
    .frontpage {
        display: block;
        margin: 5px auto;
        padding: 10px 0px;
        border: 0px #ddd dashed;
    }
    
  .sitelogo {
        width: 100%;
        display: block;
        position: absolute;
        margin: 0px auto;
        max-width: 280px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
 }
 
    #title h1 {
        font: 400 1.5em/1.2 "Lato", sans-serif;
    }
 
    #callup{
         display: block;
     } 

    #call,	
    #phoneno{
            display: none;
    }

    #callnow{
            display: inline-block;
    }
    
    #navbar{
        background-color: #7997a1;
    }
    
    #menutgl{
        width: 100%;
        height: 50px;
        display: block;
    }
    
    #menop{
        
    }
    
    .xmenu{
        display: none;
    }
    
    .m-navgrid {
        width: 100%;
        height: 50px;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: auto 60px;
        grid-template-areas: "navtxt navimg";
        grid-template-rows: auto;
       
    }

    #navtitle{
            text-align: left;
            grid-area: navtxt;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border: 0px #ddd dashed;   
            text-transform: uppercase;
    }

    #navico{
        height: 49px;
        display: flex;
        text-align: right;
        grid-area: navimg;
        padding: 5px 10px;
        border: 0px #ddd dashed;
        align-items: center;
        justify-content: center;
        font-size: 115% !important;
        background-color: #2f4f4f;
    }

    #navbar a {
        color: #fff;
        height: 50px;
        display: block;
        line-height: 2.888em;
    }
    
    #navbar a:hover {
        color: #fff;
        height: 50px;
        display: block;
        line-height: 2.888em;
    }
    
    #navbar li:hover > a,
    #navbar a:focus {
        color: #00bfff;
        line-height: 2.888em;
        padding: 0 1.2125em;
        border-bottom: 1px #00bfff solid;
    }
    
    .hidemenu{
        width: 100%;
        height: 50px;
        display: grid !important;
        grid-gap: 0px;
        grid-template-columns: auto 70px;
        grid-template-areas: "clstxt clsico";
        grid-template-rows: auto;
        border-bottom: 1px #ceeef6 solid;
  
    }

    .clsico{
        width: 70px;
        display: flex;
        grid-area: clsico;
        text-align: right;
        align-items: center;
        justify-content: center;
        font-size: 115% !important;
        background-color: #5f9ea0;
    }

    .close-menu{
        text-align: left;
        grid-area: clstxt;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-transform: uppercase;
    }

    
    .showmenu{
            height:50px;
            width: 100%; 
    }

    .slidemenu{
            display: block;
    }
    
    #mmenu{
            display: none;
            width: 100%;
            height: 390px;
            max-height: 30em;
    }

    #navbar ul li{
            display: block;
            width: 100%;
            padding: 0px;
            text-align:left;
            box-sizing: border-box;
            border-right: 0px #D4DCCC solid;
            border-bottom: 0px #D4DCCC solid;
    }

    #navbar ul li:first-child {
             border-left: none;
            }

    #wrapper {
        padding-bottom: 210px;
    }
    
    #promo{
        width: 100%;
        height: auto;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: auto; 
        grid-template-rows: auto;
        grid-template-areas: 
            "prmimg"
            "prmbtn";
        margin: 0px auto;
        background: rgba(255, 255, 251, 0.4);
    }
    
    #promotxt{
        height: auto;
        grid-area: prmtxt;
        display: block;
        font: 8vw/1.5 'Questrial', sans-serif;
    }
    
    #promoimg{
        width: 100%;
        grid-area: prmimg;
        width: auto;
    }
    
    #promobtn{
        width: 100%;
        grid-area: prmbtn;
        padding: 5px 10px;
        margin: 3% auto !important;
    }
    
    #promobtn button{
        width:70%;
        display: block;
        
    }
    
    .info-tile img {
        display: block;
        width: 60%;
        margin: 0px auto;
    }
    
    .sidebar{
        margin-bottom: 210px;
    }
    
    #shopdata{
        width: 100%;
        display: grid;
        height: auto !important;
        grid-template-columns: auto; 
        grid-template-areas: 
            "pcrwinfo" 
            "pcrwmap";
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-auto-rows: auto; 
        margin: 0px auto;
        margin-bottom: 6px;
     }
     
     #map,
     #shopinfo{
         width: 100%;
         min-height: 210px;
     }
     
     #shopinfo .pcrw{
         font-size: 5.6vw;
         margin-bottom: 0px;
     }
     
     #shopinfo .url{
         font: 1.2em/1.5 'Questrial', sans-serif;
     }
	
}

@media only screen and (min-width: 100px) and (max-width: 320px){
    
    .m-navgrid{
        width: 100%;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: auto 60px;
        grid-template-rows: auto ;
        grid-template-areas: "navtxt navimg";
        border: 0px #ddd dashed;
    }	
    
    
    .sitelogo {
        width: 100%;
        display: block;
        position: absolute;
        margin: 0px auto;
        max-width: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #phoneno{
        display: none;
    }
	
    #callup{
     display: block;
    } 
 
    #callnow{
        display: inline-block;
    }
    
    #navbar a {
        color: #fff;
        height: 50px;
        display: block;
        line-height: 2.888em;
    }
    
    #navbar a:hover {
        color: #fff;
        height: 50px;
        display: block;
        line-height: 2.888em;
    }
    
    #navbar li:hover > a,
    #navbar a:focus {
        color: #00bfff;
        line-height: 2.888em;
        padding: 0 1.2125em;
        border-bottom: 1px #00bfff solid;
    }
    
    .hidemenu,
    .slidemenu{
	width: 100%; 	
	}
        
    .hidemenu{
            display: none;
    }
	
    .showmenu,
    .slidemenu{
	border-bottom: 0px #D4DCCC solid;
	}
	
    .showmenu{
	width: 100%;
	max-height: 30em;
    }
	
    #mmenu{
        display: none;
	width: 100%;
        height: 390px;
   }
    #navbar ul li{
	display: block;
	width: 100%;
	text-align:left;
	box-sizing: border-box;
  }
  
  #navbar ul li:first-child {
	 border-left: none;
	}
        
  #wrapper {
    padding-bottom: 250px;
  }
	
  
}

.address{
    color: #071627;
}

@-webkit-keyframes swoosh {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes swoosh {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes swoosh {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.loclinks {
   height: 100%;  
   display: grid;
   grid-gap: 10px;
   grid-template-columns: auto; /* column width */
   grid-template-rows: none;
   grid-auto-flow: row;
   grid-auto-rows: auto; /* auto row height*/
   padding: 0px;
}

.loclinks div{
    display: inline-block !important;
}

#areamap a{
    width: 100%;
    display: block;
}

.locbtn{
    width: 100%;
    font-size: 102%;
    color: #fff;
    display: block;
    padding: 10px 5px;
    transition: 0.3s;
    cursor: pointer;
    margin: 0px auto;
    background-color: #ff4500; 
    box-shadow: 0px 1px 0px #ececec;
    -webkit-box-shadow: 0px 1px 0px #ececec;
    border: solid 0px #eee;
}

.locbtn:hover{
    color: #ff0;
}

.tools-grid button{
    font-size: 100%;
    padding: 10px 10px;
    transition: 0.3s;
    cursor: pointer;
    float: left;
    display: inline-block;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top , #ffffff, #f5f5f5);
    background-image: -webkit-linear-gradient( top , #ffffff, #f5f5f5);
    background-image: linear-gradient( top , #ffffff, #f5f5f5);
    background-repeat: repeat-x;
    box-shadow: 0px 1px 0px #ececec;
    -webkit-box-shadow: 0px 1px 0px #ececec;
    border: solid 1px #eee;
}

.social-grid {
   height: 100%;  
   display: grid;
   grid-gap: 5px;
   grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); 
   grid-template-rows: none;
   grid-auto-flow: row;
   grid-auto-rows: auto; 
   margin-top: 10px;
}

.social button{
    width: 100%;
    font-size: 100%;
    padding: 10px 10px;
    transition: 0.3s;
    cursor: pointer;
    box-shadow: 0px 1px 0px #ececec;
    -webkit-box-shadow: 0px 1px 0px #ececec;
    border: solid 0px #f5f5f5;
}

.social button:hover{
    color: #00bfff;
}

.fbk{
    color: #fff !important;
    background-color: #6495ed;
}

.ggl{
    color: #fff !important;
    background-color: #ce0101;
}

.twt{
    color: #fff !important;
    background-color: #00bfff;
}

#privacy p{
    font-size: 100%;
    padding: 5px 0px;
    margin-top: 10px;
    transition: 0.3s;
    border: solid 0px #eee;
    background-color: #20b2aa;
}

#privacy a{
    color: #fff;
    text-decoration: none;
}

#privacy a:hover{
    color: #6495ed;
}

.navtools button{
   color: #0082e7;
    
}
.tools-grid #phone{
    text-align: right;
    padding: 2px 10px;
    font: 500 150%/1.5 'Questrial', sans-serif;
}

.tools-grid #phone a{
    color: #071627;
    text-decoration: none;
}

#ppal{
    overflow: hidden;
}

.ppimg img{
    width: inherit;
    object-fit: contain;
}


.bg-default {
    transition: 0.3s;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top , #ffffff, #f5f5f5);
    background-image: -webkit-linear-gradient( top , #ffffff, #f5f5f5);
    background-image: linear-gradient( top , #ffffff, #f5f5f5);
    background-repeat: repeat-x;
    box-shadow: 0px 1px 0px #ececec;
    -webkit-box-shadow: 0px 1px 0px #ececec;
    border: solid 1px #eee;
}

button{
    outline:0;
}


ol,ul{
    
}

#content ul,
#content ol{
	
	padding: 0 0 1em 0;
    font: 110%/1.5 'Questrial', sans-serif;
}

#content ul li,
#content ol li{
	margin-left: 30px;
	margin-bottom: 15px;
}

blockquote,q{
    quotes:none;
}

q:after,
q:before,
blockquote:before,
blockquote:after{
    content:'';
    content:none;
}
q{
    display:inline;
    font-style:italic;
}

q:before{
    content:'"';
    font-style:normal;
}

q:after{
    content:'"';
    font-style:normal;
}

textarea,
input[type="text"],
input[type="reset"],
input[type="search"],
input[type="button"],
input[type="submit"],
input[type="password"]{
    appearance:none;
    border-radius:0;
    -webkit-appearance:none;
}

#searchform{
    width: 100%;
    padding: 2px;
    display: block;
    margin: 10px auto;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 0px 0px #aaa;
    border-top: 0px #eee solid;
}

#s,
#searchsubmit{
    display: inline-block;
}

#s{
    height: 2.3em;
    width: calc(100% - 45px);
    padding-left:5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px #CCC solid;
    }
	
#searchsubmit{
    color: #fff;
    border:none;
    width: 40px;
    height: 2.4em;
    cursor: pointer;
    font-weight:600;
    transition: 0.3s;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #F93;
}
        
#searchsubmit:hover{
	background-color: #00a699;
}
        
.wpcf7-select,
#content input{
	width: 90%;
        height: 3em;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 2px #CCC solid;
}

#content textarea {
	width: 90%;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 2px #CCC solid;
}

.wpcf7-submit {
	font-weight:600;
	color: #fff !important;
	width: 50%;
	height: auto;
	background-color: #329159;
	border-radius: 3px;
	padding: 10px 15px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 2px #CCC solid;
}
	
form { 
	width: 80%;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.fullform{
	width: 100% !important;
	display: block;
	margin: 0 !important;
}
table{
    border-spacing:0;
    border-collapse:collapse;
}

th,
td{
    padding:2px;
}

#review{
    width: 100%;
    display: block;
    overflow-x: hidden;
    object-fit: contain;
    box-sizing: border-box;
}

.linkparent {
    width: 100%;
    display: block;
    clear: both;
    margin: 10px auto;
    overflow: hidden;
    
}

.linkparent .dropdwn {
    margin: 0;
    color: #fff;
    width: 100%;
    border: none;
    outline: none;
    position: relative;
    background-color: #6495ed;
    font: 500 100.5%/1.5 'Questrial', sans-serif;
}

.linkchild {
    display: none;
    min-width: 250px;
    transition: 0.7s;
    position: absolute;
    z-index: 5;
    border-top: 1px #fff solid;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.linkchild a {
    width: 100%;
    color: #2A333B;
    transition: 0.3s;
    text-decoration: none;
    display: block;
    text-align: left;
    font: 500 100.5%/1.5 'Questrial', sans-serif;
}


.linkchild a,
.linkparent .dropdwn{
    padding: 10px 16px;
}

.linkparent:hover .dropdwn {
    color: #fff;
    transition: 0.3s;
    background-color: #47657F;
}

.linkchild a:hover {
    background-color: #308ee7;
    color: #fff;
}

.linkparent:hover .linkchild {
    display: block;
    transition: 0.3s;
}

#nav-below{
	clear:both;
	display:block;
	margin-top:25px;
	margin-bottom: 10px;
	margin-left:auto;
	margin-right: auto;
	background: none;
	}
.nav-next,
.nav-previous{
	color: #fff;
	width: 47.999%;
	display:inline-table;
	text-align:center;
	box-sizing: border-box;
	}
	
.nav-next a,
.nav-previous a{
	color: #fff;
	padding: 5px 10px;
	margin-top:25px;
	background-color: #F90;
	text-align:center;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	}
		
.meta-nav .fa-angle-left,
.meta-nav .fa-angle-right{
	vertical-align:middle;
	}	
	
.navgation { }
.next-posts { }
.prev-posts { }


big{
    font-size:120%;
}

sup,
sub,
small{
    font-size:80%;
}

sup{
    vertical-align:super;
}
sub{
    vertical-align:sub;
}
dd{
    margin-left:20px;
}

kbd,tt{
       font-size:12px;
       font-family: courier;
}
ins{
    text-decoration:underline;
}

s,
del,
strike{
    text-decoration:line-through;
}

dt{
   font-weight:bold;
}
var,
cite,
address{
    font-style:italic;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}

.sticky{
    position: sticky;
}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
.screen-reader-text{
    clip:rect(1px, 1px, 1px, 1px);
    position:absolute !important;}