/* Go crazy with your own styles here */
body {
    max-width: 100%;
    overflow-x: hidden;
    width: 100vw;
    /*background: #000 url(../images/wood-pattern.jpg) repeat 0 50%;*/
   
}
#storeDetailContainer {
    padding: 30px 40px;
}
.storeBox {
    cursor:pointer;
}
.text-center h3{
     text-align:center;
}
#orangeTab  h3{
    text-align:center;
}

h2, h3{
    text-align:left;
}

h2{
    font-size:19px;
}

p img, h1 img , h2 img, h3 img, b img, strong img{
    padding:10px;
}

li, a {
    font-size: 13px;
}
a:hover {
    text-decoration:none !important;
}

p {
    font-size:15px;
    font-weight:500;
}

strong {
  font-weight: 600;
}
/*header{
    background-image:url("/images/Header_Background.jpg");
	background-size: 100% 181px; 
	
}*/
.navigationBar {
    margin: 0px;
}

.field-validation-error{
    color:rgba(217, 9, 44, 1);
    font-size: 12px;
    
}
.input-validation-error{  
    border-color: rgba(217, 9, 44, 1);   
}

#sideToLogo {
    color: white;
    margin-top: 30px;
}

nav > ul li a, nav > ul li span {
    font-size: 10px !important;
    margin: 0px 6px;
    padding: 0px;
}

nav > ul li {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 5px !important;
}

.navigationBar {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
}

.level-2 {
    margin-top: 3px;
}


#footerNav {
    list-style-type: none;
}
footer.dark a:hover {
    border-bottom:none !important;
}
  #footerNav li {
      display: inline;
      font-size: 5px !important;
      border-right: 1px solid #FBF6F6;
      text-decoration:none;
  }

 #footerNav li a {
     font-size: 10px !important;
     margin: 0 6px;
 }

       #footerNav li a:hover , #footerNav li a:active , #footerNav li a:visited {
        text-decoration:none !important;
      }

.btnBottom {
    width: 180px;
    height: 35px;
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.socialIcons {
    height: 25px !important;
    width: 25px !important;
    float: left;
    margin: 2px 0px -11px 0px !important;
}

    .socialIcons li {
        text-decoration: none;
    }

.socialIconsMobile {
    width: 25px !important;
    margin: -20px 0px -11px 0px !important;
}

#responsiveFooterBlock {
    text-align: center;
}

    #responsiveFooterBlock ul {
        list-style-type: none;
    }

        #responsiveFooterBlock ul li {
           margin:10px 0px;
           margin-right: -10px;
        }

            #responsiveFooterBlock ul li a {
                display: block;
                color: #ffffff;
                border-radius: 5px;
                text-decoration: none;
                border: 1px solid #ffffff;
                width: 90% !important;
                height:45px;
                padding: 12px;
                background:rgba(0,0,0,0.7);
            }

           #responsiveFooterBlock ul li a:hover {
               color: #ff9900;
               background:rgba(0,0,0,0.4);
           }

            #responsiveFooterBlock ul li a:active {
                    color: #ffffff;
                    background:rgba(0,0,0,0.4);
           }


/*#orangeTab {background-color:#ff9900;text-align:center; color:#ffffff; }

#orangeTab a {color:#ffffff;background-color:#ff9900; }

#orangeTab a:hover { color:#ff9900; background-color:#ffffff;}

#orangeTab a:active { color:#ff9900; background-color:#ffffff;}

#orangeTab .active a{ color:#ff9900 !important; background-color:#ffffff !important;}*/

 #normalPageMobile{
        display:none;
 }

.normalPageYellow {
    display:block;
}

#orangeTab {
    background-color: #ff9900;
    text-align: center;
    color: #ffffff;
    height: 44px;
    padding-top: 10px;
  
}

    #orangeTab ul {
     

        color: #ffffff;
        background-color: #ff9900;
        list-style-type: none;
    }

        #orangeTab ul li {
            text-decoration: none;
            display: inline;       
            /*border: 1px solid white;*/
            box-shadow: 0 1px 3px 0 #ffffff;
        }   

    #orangeTab a {
        color: #ffffff;
        background-color: #ff9900;
        padding: 12px 4px;
         margin-right: -4px;
       width:auto;
    }

        #orangeTab a:hover {
            color: #ff9900;
            background-color: #ffffff;
            text-decoration: none;     
             
        }

        #orangeTab a:active {
            color: #ff9900;
            background-color: #ffffff;
        }

    #orangeTab .active a {
        color: #ff9900 !important;
        background-color: #ffffff !important;
    }





#orangeTabStore {
    background-color: #ff9900;
    text-align: center;
    color: #ffffff;
    height: 44px;
}

    #orangeTabStore a {
        color: #ffffff;
        background-color: #ff9900;
        font-size: 16px;
        margin-right: 0px; 

        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        -khtml-border-radius: 0px;
         border-radius: 0px;

    }

        #orangeTabStore a:hover {
            color: #ff9900;
            background-color: #ffffff;
            border:1px solid transparent;
        }

        #orangeTabStore a:active {
            color: #ff9900;
            background-color: #ffffff;
        }

    #orangeTabStore .active a {
        color: #ff9900 !important;
        background-color: #ffffff !important;
        border: 1px solid #ffffff;
    }

    .activeMenu {
        color:#ff9900 !important; 
        background-color:#ffffff !important;
    }

    nav > ul li a, nav > ul li span {
  font-size: 12px !important;
}


nav > ul li:last-child, #footerNav ul li:last-child {
  border: none;
}

#orangeTabMenu {
    background-color: #ff9900;
    text-align: center;
    color: #ffffff;
    height: 75px;
    padding-top: 10px;
  
}

    #orangeTabMenu ul {
     

        color: #ffffff;
        background-color: #ff9900;
        list-style-type: none;
    }

        #orangeTabMenu ul li {
            text-decoration: none;
            display: inline-block;       
            /*border: 1px solid white;*/
            box-shadow: 0 1px 3px 0 #ffffff;
            margin-bottom: 9px;
        }   

    #orangeTabMenu a {
        color: #ffffff;
        background-color: #ff9900;
        padding: 5px 9px;
         margin-right: -4px;
       width:auto;
    }

        #orangeTabMenu a:hover {
            color: #ff9900;
            background-color: #ffffff;
            text-decoration: none;     
             
        }

        #orangeTabMenu a:active {
            color: #ff9900;
            background-color: #ffffff;
        }

    #orangeTabMenu .active a {
        color: #ff9900 !important;
        background-color: #ffffff !important;
    }


@media (max-width: 995px) {
    header {
        display: none;
    }
    #normalPageMobile{
        display:block;
    }
    .normalPageYellow {
    display:none;
    }

    #orangeTab {
        background-color: #ffffff;
        height: auto;
        margin: 1px 10px 1px 0px;
    }

        #orangeTab ul {
            margin: 0px auto;
        }

            #orangeTab ul li {
                display: block;

            }

        #orangeTab a {
            display: block;
            padding: 12px;
            font-size: 15px;
            font-weight: 700;
            height: 45px;

        }

        #orangeTab a:hover {
            color:rgba(255,255,255,0.8);
            background: rgba(0,0,0,0.5);

        }

       #orangeTab a:active {
           background: rgba(0,0,0,0.2);
       }

    .activeMenu {
        color: #ff9900 !important;
       background: rgba(255,255,255,0.7)!important;
    }

    .brand {
        margin: auto;
    }


      #orangeTabMenu {
        background-color: #ffffff;
        height: auto;
        margin: 1px 10px 1px 0px;
    }

        #orangeTabMenu ul {
            margin: 0px auto;
        }

            #orangeTabMenu ul li {
                display: block;
                margin-bottom: 0px;
            }

        #orangeTabMenu a {
            display: block;
            padding: 12px;
            font-size: 15px;
            font-weight: 700;
            height: 45px;

        }

        #orangeTabMenu a:hover {
            color:rgba(255,255,255,0.8);
            background: rgba(0,0,0,0.5);

        }

       #orangeTabMenu a:active {
           background: rgba(0,0,0,0.2);
       }
}

#menuLogoTop {
    color: white;
    padding: 31px;
    width: 55%;
    margin: 0px auto;
    text-align: center;
    position: relative;
    top: 150px;
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
    background-image: linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
}

#menuLogoTop h2
{
    text-align:center;
}

#menuLogoTopForStore {
    color: white;
    height: 100px;
    padding: 0px;
    width: 50%;
    margin: 0px auto;
    text-align: center;
    position: relative;
    top: 150px;

    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
    background-image: linear-gradient(right, rgba(0,0,0,0.1), rgba(0,0,0,0.5),rgba(0,0,0,0.1));
}

    #menuLogoTopForStore h1 {
        text-transform: uppercase;
    }

      #menuLogoTopForStore h2,  #menuLogoTopForStore h3 {
       text-align:center;
    }

.downloadMenu {
    margin-top: 10px;
}

.downloadMenu a:hover{
   color:#ffffff;
   background:rgba(0,0,0,0.5);
   margin-bottom:10px;
}

.downloadButton {
    background-color: #ff9900;
    color: #ffffff;
    padding: 4px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.hrFooter {
    margin: 18px 20px;
}

.bottomLink a {
    padding: 5px;
    display: inline-block;
    background:rgba(0,0,0,0.7);

}

.bottomLink a:hover {
    padding: 5px;
    display: inline-block;
    background:rgba(0,0,0,0.4);
    color:#ff9900;
    border-color:#ff9900;
  
}


/*store locator css*/
#nzMapMain {
    margin-top: 50px;
}

#divNorthland {
    position: absolute;
    top: 37px;
    right: 285px;
    width: 150px;
    height: 100px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#divAuckland {
    position: absolute;
    top: 136px;
    right: 253px;
    width: 120px;
    height: 72px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#divWaikato {
    position: absolute;
    top: 207px;
    right: 185px;
    width: 200px;
    height: 119px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#divWellington {
    position: absolute;
    top: 325px;
    right: 247px;
    width: 100px;
    height: 70px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#divNelson {
    position: absolute;
    top: 325px;
    right: 346px;
    width: 155px;
    height: 125px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#divCanterbury {
    position: absolute;
    top: 449px;
    right: 375px;
    width: 230px;
    height: 105px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#divSouthland {
    position: absolute;
    top: 553px;
    right: 464px;
    width: 170px;
    height: 110px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.highlightMap {
    background: rgba(224, 158, 46, 0.6);
    border-color: rgba(224, 158, 46, 0.6);
}

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    text-decoration: none;
    line-height: 1;
    position: relative;
}

    #cssmenu a {
        line-height: 1.3;
    }

#cssmenu {
    background: #fff;
    padding: 3px;
}

    #cssmenu > ul > li {
        margin: 0 0 2px 0;
    }

        #cssmenu > ul > li:last-child {
            margin: 0;
        }

        #cssmenu > ul > li > a {
            display: block;
            color: black;
            background: #ffffff;
        }

            #cssmenu > ul > li > a > span {
                display: block;
                padding: 6px 10px;
            }

            #cssmenu > ul > li > a:hover {
                text-decoration: none;
                background: #ff9900;
                color: #fff;
            }

        #cssmenu > ul > li.active {
            border-bottom: none;
        }

            #cssmenu > ul > li.active > a {
                background: #ff9900;
                color: #fff;
            }

                #cssmenu > ul > li.active > a span {
                }

        #cssmenu > ul > li.has-sub > a span {
            background: url(/images/icon_right.png) 98% center no-repeat;
            background-size: 5px;
        }

        #cssmenu > ul > li.has-sub.active > a span {
            background: url(/images/icon_minus_white.png) 98% center no-repeat;
            background-size: 10px;
        }
    /* Sub menu */
    #cssmenu ul ul {
        padding: 5px 12px;
        display: none;
    }

        #cssmenu ul ul li {
            padding: 3px 0;
        }

        #cssmenu ul ul a {
            display: block;
            color: #595959;
            font-size: 12px;
            font-weight: bold;
        }

            #cssmenu ul ul a:hover {
                color: #ff9900;
            }


.home-block a {
    padding: 5px; /*Please fix*/
    width: 170px !important;
    display: inline-block;
}
.home-block a:hover {
    background: rgba(0,0,0,0.4);
  color: #ff9900;
  /*border-color: #ff9900;*/
}



.container {
    width: 60%;
}

 #menuLogoTopForStore hr{
 
        margin: 3px 40px;
    }

@media (max-width: 768px) {

     #menuLogoTopForStore {
      width:70%;
    }
    .container {
        width: 95%;
    }

     #storeDetailContainer {
    padding: 10px 10px;
   }
}


 .light{
          padding: 20px 0;
    }   

    .blogarchive h2, .blogarchive a, .blogarchive p{
        font-family: "Titillium Web", sans-serif;
    }   
     .blogarchive h2{
          font-weight: 600;
     }       

   .blogarchive a {
      min-height: 150px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.1);
      -webkit-border-radius: 12px; 
      -moz-border-radius: 12px; 
      border-radius: 12px; 
      
   }

    .blogarchive p {       
        color: #7f7d7d;
        transition: all 200ms ease;
        font-size: 12px;
    }




@media (min-width: 768px) {
   
}



@media only screen and (max-width : 320px) {
    #menuLogoTopForStore {
      width:90%;
       
    }

     #menuLogoTop {
      width:90%;       
    }
    .container {
        width: 95%;
    }

    #storeDetailContainer {
    padding: 10px 10px;
   }

    h2 {
  font-size:18px;
  }
    h3 {
  font-size:16px;
  }
}

@media only screen and (min-width : 920px) {
    .hrFooter {
      margin: 18px 0px;
  }
}

@media only screen and (min-width : 1224px) {
    .hrFooter {
    margin: 18px 30px;
   }
}

@media only screen and (min-width : 1500px) {
    .hrFooter {
    margin: 18px 60px;
   }  
}

@media only screen and (min-width : 1740px) {
   

    #orangeTabMenu {
        height:42px;
    }
}


@media (max-width: 992px){
    nav{
        margin-top: -50px;
    }

    nav > ul li:first-child a{
        padding:0px;
        padding-top:4px;
    }

     nav > ul li{
         border:none;
     }

    nav > ul li a, nav > ul li span {
        font-size:14px !important;
       height: 30px;     
      width: 100%;
      margin:2px;
      padding:4px;
      
    }

    .menuType {
        margin-top:2px;
    font-size:13px !important;
    color: #ff9900
    }

}

@media (min-width: 992px){
    .menuLevel{
            margin-top: 22px;
    }
    .menuLevel li{
        border:none;
        height: 21px !important;
    }
     .menuLevel label{
         font-size: 11px;
         color: #ffffff;
         padding-left: 8px;
         margin-top: 10px;
         margin-bottom: 0px;
    }
     nav .has-child:hover > .sublevel {
        display: block;
        left: -10px;
          padding-bottom: 15px;
    }
   
    .mainNavBar li{
          height: 20px;
    }
  
}
@media all and (max-width: 1024px){
	#em_subscribe_form {
			width: 60% !important;
	}
}
@media all and (max-width: 600px){
	#em_subscribe_form {
			width: 80% !important;
	}
}
@media all and (max-width: 480px){
	#em_subscribe_form {
			width: 80% !important;
	}
}
@media all and (max-width: 360px){
	#em_subscribe_form {
			width: 100% !important;
	}
 }
@media all and (max-width: 800px) and (max-height:900px){
	body {
			overflow:visible !important;
	}
 }


.btn-custom {
  background-color: hsl(70, 11%, 26%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#787c63", endColorstr="#47493b");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#787c63), to(#47493b));
  background-image: -moz-linear-gradient(top, #787c63, #47493b);
  background-image: -ms-linear-gradient(top, #787c63, #47493b);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #787c63), color-stop(100%, #47493b));
  background-image: -webkit-linear-gradient(top, #787c63, #47493b);
  background-image: -o-linear-gradient(top, #787c63, #47493b);
  background-image: linear-gradient(#787c63, #47493b);
  border-color: #47493b #47493b hsl(70, 11%, 21.5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.29);
  -webkit-font-smoothing: antialiased;
}

.storeBox {
    border:1px solid #000000;
    padding:10px 0px;
    margin-bottom: 5px;
       margin-left: -11px;
  margin-right: -12px;
}
.storeBox p {
   font-size:10px;
}
.viewMore {
  width: 95px !important;
  padding: 6px !important;
  background: #ff9900;
  color: white !important;
  margin-bottom:-8px !important;
  font-weight: 600 !important;
  text-align:center;
}
.directionLink {
   width: 95px !important;
  padding: 6px !important;
  background: #3276b1;
  color: white !important;
  margin-bottom: 5px !important;
  font-weight: 600 !important;
  text-align: center;
  border: 1px solid #3276b1;
}
.inviteLink {
  width: 95px !important;
  padding: 6px 0px 6px 2px !important;
  background: rgba(0,0,0,0.7);
  color: white !important;
    font-weight: 600 !important;
    text-align:center;
}

.tt-menu {
    background-color:rgba(0,0,0,0.7);
      width: 100%;
      color:#ffffff;
      padding:5px 10px ;
}

    .tt-menu .tt-suggestion {
        cursor:pointer;
        width:100%
    }

/*#btnReset {
     background: #ffffff;
     color: #ff9900;
     border:1px solid black;
       height: 33px;
}*/
#btnDirection {
     background: #ffffff;
     color: #ff9900;
     border:1px solid black;
     display:none;
}

 .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary {background-color: #ff9900; border-color: #e68a00;}

.btn-primary:hover{background-color: #e68a00; border-color: #e68a00;}


.form-control:focus {
  border-color: #ff9900;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 153, 0, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 153, 0, 0.6);
}

#em_subscribe_form {
    background: #000000 none repeat scroll 0 0;
    border: 15px solid #FF7D23;
    font-size: 12px;
   background: url('//thecoffeeclub.co.nz/media/1529/coffebeanbg.jpg');
	background-size: cover;
	margin: 0 auto;
  left: 0;
  right: 0;
    padding: 0px;
    position: absolute;
    top: 100px;
    width: 40%;
    z-index: 999999;
	display:none;
}
#em_subscribe_form select {
    border: 0 none;
	 padding: 7px 5px;
	border-radius: 5px;
}
#em_subscribe_form input {
    border: 0 none;
    font-size: 12px;
	width: 100%;
    padding: 8px;
	border-radius: 5px;
}
#em_subscribe_form label,#em_subscribe_form .wfe_component h6 {
	font-size:12px;
	color: #fff !important;
	font-weight: normal;
}
#em_subscribe_form h6 {
	    display: inline-block;
    margin-top: 15px;
}
#em_subscribe_form input[type="submit"] {
    background: #FF7D23 none repeat scroll 0 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    height: auto !important;
    padding: 8px 15px;
	width: auto;
	border-radius: 3px
}
.subscribetext {
	color:#FFA22B;
	font-size: 1.4em;
	padding: 0 10px 15px;
	font-weight: bold;
}
.closeform {
    background: #FF7D23 none repeat scroll 0 0;
    color: #ffffff;
    display: inline-block;
    float: right;
    padding: 5px;
	cursor:pointer;
}
.fieldwrap {
    padding: 5px;
}
#em_subscribe_form .fieldwrap > div > div > select {
    width: 100%;
}
.subscribepopup, .subscribepopup:hover,.subscribepopup:active,.subscribepopup:focus {
	color:#FF7D23;
		}
.webform_step {
    background-color: rgba(0,0,0,0.5);
    padding: 30px;
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */