/* 
      ___        ___      ___        ___     
     /\__\      /\  \    /\  \      /\  \    
    /::|  |    /::\  \   \:\  \    /::\  \   
   /:|:|  |   /:/\:\  \   \:\  \  /:/\:\  \   
  /:/|:|__|__/::\~\:\  \  /::\  \/::\~\:\  \    ___  _ ____ _ ___ ____ _   
 /:/ |::::\__\/\:\ \:\__\/:/\:\__\/\:\ \:\__\   |__> | |__, |  |  |--| |___
 \/__/~~/:/  /\~\:\ \/__/:/  \/__/__\:\/:/  /   .co.nz
       /:/  /\:\ \:\__\/:/  /        \::/  /     
      /:/  /  \:\ \/__/\/__/         /:/  /        
     /:/  /    \:\__\               /:/  /          
     \/__/      \/__/               \/__/    


Theme Name: STOP Theme
Description: STOP theme
Version: 1
Author: Meta Digital
Author URI: http://metadigital.co.nz/
*/

body{
    background-color: #ccc;
    background-image: url('./images/texture.png');
}

.container{
  padding:0;
  max-width: 1024px;
  width:100%;
}

#wrap{
  background-color: #fff;  
  max-width: 1024px;
}

/*============ Headings/Fonts/Colours ============*/


body{
  font-family: 'Open Sans', 'Helvetica', sans-serif;
  color:#808080;
  line-height: 1.4;
}


h1{
  font-family: 'Roboto Slab';
  color:#808080;
}

h2{ color:#000;
   font-size: 25px;
   font-size: 2.5rem;
   font-family: 'Roboto Slab';
}

h3{ color:#000;
    font-size: 20px;
   font-size: 2rem;
   font-family: 'Roboto Slab';
}

h4{
  font-family: 'Open Sans';
  font-size:14px;
  font-size:1.4rem;
  color:#000;
  font-weight:600;
}

h5{
  font-family: 'Roboto Slab';
}

h6{
  font-family: 'Roboto Slab';
}

p{}

strong{font-weight:bold}

a{
  text-decoration:none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

a:visited{

}

a:hover{
  text-decoration:none;
}

a:active{

}

.alignright {float:right;}

.alignleft {float:left;}

* {outline:none!important;}

/*============ Header ============*/

.main-banner{
  background-color:#01a1b1;
}

.main-banner img{
  margin-top:-38px;
  max-width:100%;
}

.top-menu{
  float:right;
  position: relative;
  z-index:10;
}

ul{
  -webkit-padding-start: 0px;
  padding-start:0px;
  padding-left: 0px;
}

.top-menu{
  background-color: #fff;
  padding: 0px;
}
.top-menu ul{
  margin: 0px;
}

.top-menu ul li{
  margin: 0px;
  padding:0;
  list-style: none;
  display: inline-block;
  position: relative;
}

header nav.top-menu a{
  color: #000;
  font-size:16px;
  font-size:1.6rem;
  padding:5px 5px;
  display:inline-block;
  font-family: 'Roboto Slab', 'rockwell';
}

.top-menu a:hover{
  color:#5AB3E8;
}

.top-menu .sub-menu{
/*   border-top:1px solid #808080; */
  width:100%;
  background-color: #FBFCFC;
  visibility: hidden;
  opacity:0;
  position:absolute;
  left:auto;
  top:75%;
  z-index:9999;
  padding:0 0;
  -webkit-transition: all .75s ease;
  -moz-transition: all .75s ease;
  -ms-transition: all .75s ease;
  -o-transition: all .75s ease;
  transition: all .75s ease;
}

.top-menu li:hover .sub-menu{
  visibility: visible;
  opacity:1;  
  top:100%;
}

.top-menu li .sub-menu li a{
  font-family: 'Open Sans';
  font-size:14px;
  font-size:1.4rem;
}

.bottomalign{
  bottom: 0px;
}

.categorymenu{
  padding: 0px;
  height: 80px;
  background: #ffffff;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY2ZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #ffffff 0%, #f5f6f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f6f7));
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f6f7 100%);
  background: -o-linear-gradient(top,  #ffffff 0%,#f5f6f7 100%);
  background: -ms-linear-gradient(top,  #ffffff 0%,#f5f6f7 100%);
  background: linear-gradient(to bottom,  #ffffff 0%,#f5f6f7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f6f7',GradientType=0 );

}

.categorymenu ul{
  padding: 0px;
  margin: 0px;
}
.categorymenu a{
  color: black;
}
.categorymenu ul li{
  z-index:999;
  float:left;
  position: relative;
  list-style: none;
  font-family: 'Open Sans';
  padding: 15px 25px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.categorymenu ul li.our-guide{
  padding: 8px 0 0 15px;
  position: relative;
  display: none;
}

.categorymenu ul li.our-guide:hover{
  background-color:transparent!important;
}

.categorymenu ul li.nopad:hover{
  background-color:transparent;
}

.categorymenu ul li span.heading{
  font-family: 'Roboto Slab', 'rockwell';
  font-size:2rem;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.categorymenu ul li.current_page_parent span.heading,
.categorymenu ul li.current_page_parent a,
.categorymenu ul li:hover a,
.categorymenu ul li:hover a span.heading{
  color: #fff!important;
    -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.categorymenu ul li.current_page_parent{
  color: #fff;
}

.categorymenu ul li.current_page_parent span.heading{
  color: #fff!important;
}

.categorymenu .sub-menu{
  min-width:100%;
  background-color: #FBFCFC;
  visibility: hidden;
  opacity:0;
  position:absolute;
  left:0;
  top:75%;
  z-index:9;
  padding-bottom:15px;
  -webkit-transition: all .75s ease;
  -moz-transition: all .75s ease;
  -ms-transition: all .75s ease;
  -o-transition: all .75s ease;
  transition: all .75s ease;
}

.categorymenu .sub-menu li{
  padding-top:5px;
  padding-bottom:5px;
  white-space: nowrap;
  width:100%;
}

.categorymenu li:hover .sub-menu{
  visibility: visible;
  opacity:1;  
  top:100%;
}

.shiftnav-toggle{
  float:right;
  color:#000;
  margin:28px 25px 0 0!important;
  text-transform: uppercase;
  font-weight:600;
  font-size:20px;
  font-size:2rem;
}

.shiftnav-toggle i{
  margin-left:5px;
  font-size:20px;
  font-size:2rem;
}

.shiftnav::after{
  display:none!important;
}

#shiftnav-main.shiftnav{
  width:100%!important;
  max-width:100%;
}

.shiftnav ul.shiftnav-menu li.menu-item > a.shiftnav-target {
  line-height: 1;
  padding:20px 10px;
}

.shiftnav ul.shiftnav-menu li.menu-item > a.shiftnav-target span.heading{
  font-family: 'Roboto Slab', 'rockwell';
  font-size: 20px;
  font-size:2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.shiftnav ul.shiftnav-menu li.menu-item .sub-menu a.shiftnav-target{
  font-size: 14px;
  font-size:1.4rem;
  font-weight: normal;
  text-transform: none;
  padding:10px 20px;
  color:#fff;
}

.shiftnav-submenu-activation .fa{
  color:#fff;
}

.shiftnav .shiftnav-toggle{
  width:100%;
  padding:25px;
  margin:0 0!important;
  text-align: right;
  border-bottom:1px solid#ccc;
}

.shiftnav a.our-guide-mobile{
  display: block;
  text-align: center;
  margin:25px;
  display: none;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {

  .categorymenu ul li{
    z-index:999;
    float:left;
    position: relative;
    list-style: none;
    font-family: 'Open Sans';
    padding: 15px 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  .categorymenu ul li.our-guide{
    padding: 8px 0 0 10px;
    position: relative;
    max-width:10px;
  }
  
}

/* Mobile */
@media (max-width: 767px) {
 
  .top-menu{
    float:none;
    display: none;
  }
  
  .mobile-logo{
    padding-bottom:45px;
    margin:0 auto;
    max-width:100%;
  }
  
  .categorymenu{
    float:left;
  }
  
  .categorymenu .menu-item,
  .categorymenu ul li.our-guide,
   .categorymenu .menu-item .sub-menu{
    display: none;
  }
  
  .home  .categorymenu .menu-item.about-us,
   .categorymenu .menu-item.current_page_parent,
   .categorymenu .menu-item.current_page_item{
    display: inline-block;
  }
 
}

/*============ Home ============*/


.home-banner{
  background-color:#fff;
  background-image:url('images/banners/stop-home.png');
  background-repeat: no-repeat;
  background-position:left bottom;
  height:270px;
}

.home .top-menu{
  margin-top:98px;
}

.home .categorymenu li a span.heading{
  color:#fff;
}

/* Mobile */
@media (max-width: 767px) {
 
  .home-banner{
    background-color: #59B3E8;
    background-image:none;
    height:auto;
  }
}


/*============ Content ============*/

#page-content{
  padding-bottom:40px;
}

#page-content li{
  margin-left:15px;
  margin-bottom:15px;
}

/*============ Sidebar ============*/

.sidebar{
  background-color:#f5f5f5;
  padding: 0px;
  margin-right: 0px;
  word-wrap: break-word;
}

.sidebar h3{
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom:2px solid #000;
  padding:0 15px 5px 15px;
  margin-bottom:10px;
}

.sidebar-section{
    padding:0 15px 15px 15px;
}

.sidebar-section a{
  color:#808080;
}

.sidebar-section a:hover{
  color:#000;
}

.sidebar-section a:hover strong{
  text-decoration: underline;
}

.sidebar-section strong{
  color:#000;
}

.sidebar-section p.contact-region{
  color:#000;
  font-weight: 900;
  margin:0;
}

.sidebar-section p.contact-name{
  color:#000;
  margin:0;
}

/*============Footer============*/

html,
body {
    height: 100%;
}
      
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -175px;
    padding: 0 0 175px;
}
     
footer {
    height: 175px;
    background-color: #666;
}

.singlecolour{
  width: 20%;
  margin: 0px;
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

.singlecolour.about-us{background-color:#67b2e8;}

.singlecolour.children{background-color:#8dc641;}

.singlecolour.girls{background-color:#8c84d6;}

.singlecolour.adolescent{background-color:#0da0d3;}

.singlecolour.adult{ background-color:#078787;}


.clear{clear:both;}

footer ul li{
  list-style: none;
}

footer ul li a{
  color: #fff;
  font-size:12px;
  font-size:1.2rem;
}

footer ul li a:hover{
  color:#59B3E8;
}

footer ul li a.footer-heading{
  font-size:14px;
  font-size:1.4rem;
  font-weight:bold;
}

footer ul li a.footer-heading:hover{
  color:#fff;
}

.footercolumn{
  display: inline-block;
  margin: 0 15px;
  padding-top:15px;
  vertical-align: top;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Mobile */
@media (max-width: 767px) {
  footer{
    height:auto;
  }
  
  .footercolumn{
    display: inline-block;
    width:100%;
    margin: 0 15px;
    padding-top:15px;
    vertical-align: top;
  }
}

/* About Us/Default Colours
====================================*/

/*Primary Color*/
.page-id-4 .main-banner,
.parent-pageid-4 .main-banner,
.page-template-default .main-banner{
  background-color: #59B3E8;
}

.home .categorymenu li.about-us,
.home .categorymenu li.about-us .sub-menu,
li.about-us a.shiftnav-target,
.page-template-default .categorymenu .sub-menu
{
  background-color:#59B3E8;
}

.page-id-4 .categorymenu ul li:hover,
.page-id-4 .categorymenu ul li.current_page_item,
.page-id-4 .categorymenu li .sub-menu,
.parent-pageid-4 .categorymenu ul li:hover,
.parent-pageid-4 .categorymenu ul li.current_page_item,
.parent-pageid-4 .categorymenu ul li.current_page_parent,
.parent-pageid-4 .categorymenu ul li.current-page-ancestor,
.parent-pageid-4 .categorymenu li .sub-menu,
.page-template-default .categorymenu ul li:hover{
  background-color: #59B3E8;
}

.page-id-4 #page-content a,
.parent-pageid-4 #page-content a,
.page-template-default a,
.page-id-4 .text-primary-color,
.parent-pageid-4 .text-primary-color,
.page-template-default .text-primary-color
{
  color:#59B3E8;
}

/*2nd Color*/

.page-id-4 .categorymenu ul li span.heading,
.parent-pageid-4 .categorymenu ul li span.heading,
.page-template-default .categorymenu ul li span.heading,
.page-id-4 .text-secondary-color,
.parent-pageid-4 .text-secondary-color,
.page-template-default .text-secondary-color,
li.about-us a.shiftnav-target{
  color:#000;
}

.page-id-4 #page-content a:hover,
.parent-pageid-4 #page-content a:hover,
.page-template-default #page-content a:hover{
  color:#000;
}

/* Childrens Colours
====================================*/

/*Primary Color*/
.page-id-8 .main-banner,
.parent-pageid-8 .main-banner{
  background-color: #8dc641;
}

.home .categorymenu li.children,
.home .categorymenu li.children .sub-menu,
li.children a.shiftnav-target{
  background-color:#8dc641;
}

.page-id-8 .categorymenu ul li:hover,
.page-id-8 .categorymenu ul li.current_page_item,
.page-id-8 .categorymenu li .sub-menu,
.parent-pageid-8 .categorymenu ul li:hover,
.parent-pageid-8 .categorymenu ul li.current_page_item,
.parent-pageid-8 .categorymenu ul li.current_page_parent,
.parent-pageid-8 .categorymenu ul li.current-page-ancestor,
.parent-pageid-8 .categorymenu li .sub-menu{
  background-color: #8dc641;
}

.page-id-8 #page-content a,
.parent-pageid-8 #page-content a,
.page-id-8 .text-primary-color,
.parent-pageid-8 .text-primary-color{
  color:#8dc641;
}

/*2nd Color*/

.page-id-8 .categorymenu ul li span.heading,
.parent-pageid-8 .categorymenu ul li span.heading,
.page-id-8 .text-secondary-color,
.parent-pageid-8 .text-secondary-color,
.page-id-8 h3,
.parent-pageid-8 h3,
li.children a.shiftnav-target{
  color: #ED2224;
}

.page-id-8 #page-content a:hover,
.parent-pageid-8 #page-content a:hover{
  color:#ED2224;
}

/* Girls Colours
====================================*/

/*Primary Color*/
.page-id-16 .main-banner,
.parent-pageid-16 .main-banner{
  background-color: #8c84d6;
}

.home .categorymenu li.girls,
.home .categorymenu li.girls .sub-menu,
li.girls a.shiftnav-target{
  background-color:#8c84d6;
}

.page-id-16 .categorymenu ul li:hover,
.page-id-16 .categorymenu ul li.current_page_item,
.page-id-16  .categorymenu li .sub-menu,
.parent-pageid-16 .categorymenu ul li:hover,
.parent-pageid-16 .categorymenu ul li.current_page_item,
.parent-pageid-16 .categorymenu ul li.current_page_parent,
.parent-pageid-16 .categorymenu ul li.current-page-ancestor,
.parent-pageid-16 .categorymenu li .sub-menu{
  background-color: #8c84d6;
}

.page-id-16 #page-content a,
.parent-pageid-16 #page-content a,
.page-id-16 .text-primary-color,
.parent-pageid-16 .text-primary-color{
  color:#8c84d6;
}

/*2nd Color*/

.page-id-16 .categorymenu ul li span.heading,
.parent-pageid-16 .categorymenu ul li span.heading,
.page-id-16 .text-secondary-color,
.parent-pageid-16 .text-secondary-color,
.page-id-16 h3,
.parent-pageid-16 h3,
li.girls a.shiftnav-target{
  color: #90298D;
}

.page-id-16 #page-content a:hover,
.parent-pageid-16 #page-content a:hover{
  color:#90298D;
}

/* Adolescent Colours
====================================*/

/*Primary Color*/
.page-id-10 .main-banner,
.parent-pageid-10 .main-banner{
  background-color: #0da0d3;
}

.home .categorymenu li.adolescent,
.home .categorymenu li.adolescent .sub-menu,
li.adolescent a.shiftnav-target{
  background-color:#0da0d3;
}

.page-id-10 .categorymenu ul li:hover,
.page-id-10 .categorymenu ul li.current_page_item,
.page-id-10 .categorymenu li .sub-menu,
.parent-pageid-10 .categorymenu ul li:hover,
.parent-pageid-10 .categorymenu ul li.current_page_item,
.parent-pageid-10 .categorymenu ul li.current_page_parent,
.parent-pageid-10 .categorymenu ul li.current-page-ancester,
.parent-pageid-10 .categorymenu li .sub-menu{
  background-color: #0da0d3;
}

.page-id-10 #page-content a,
.parent-pageid-10 #page-content a,
.page-id-10 .text-primary-color,
.parent-pageid-10 .text-primary-color{
  color:#0da0d3;
}

/*2nd Color*/

.page-id-10 .categorymenu ul li span.heading,
.parent-pageid-10 .categorymenu ul li span.heading,
.page-id-10 .text-secondary-color,
.parent-pageid-10 .text-secondary-color,
.page-id-10 h3,
.parent-pageid-10 h3,
li.adolescent a.shiftnav-target,
.page-id-10 .categorymenu .sub-menu li a:hover{
  color: #8dc641;
}

.page-id-10 #page-content a:hover,
.parent-pageid-10 #page-content a:hover{
  color:#8dc641;
}

/* Adult Colours
====================================*/

/*Primary Color*/
.page-id-12 .main-banner,
.parent-pageid-12 .main-banner{
  background-color: #078787;
}

.home .categorymenu li.adult,
.home .categorymenu li.adult .sub-menu,
li.adult a.shiftnav-target{
  background-color:#078787;
}

.page-id-12 .categorymenu ul li:hover,
.page-id-12 .categorymenu ul li.current_page_item,
.page-id-12 .categorymenu li .sub-menu,
.parent-pageid-12 .categorymenu ul li:hover,
.parent-pageid-12 .categorymenu ul li.current_page_item,
.parent-pageid-12 .categorymenu ul li.current_page_parent,
.parent-pageid-12 .categorymenu ul li.current-page-ancestor,
.parent-pageid-12 .categorymenu li .sub-menu
{
  background-color: #078787;
}

.page-id-12 #page-content a,
.parent-pageid-12 #page-content a,
.page-id-12 .text-primary-color,
.parent-pageid-12 .text-primary-color{
  color:#078787;
}

/*2nd Color*/

.page-id-12 .categorymenu ul li span.heading,
.parent-pageid-12 .categorymenu ul li span.heading,
.page-id-12 .text-secondary-color,
.parent-pageid-12 .text-secondary-color,
.page-id-12 h3,
.parent-pageid-12 h3,
li.adult a.shiftnav-target{
  color: #c1282d;
}

.page-id-12 #page-content a:hover,
.parent-pageid-12 #page-content a:hover{
  color:#c1282d;
}