/* Please note: Twitter Bootrap files located under the framework folder of website. There are other CSS files found under that folder attached via the template */
/* For more information/documentation please visit: http://twitter.github.io/bootstrap/ */

/* Insert Viewport declorations Here */

 /* Extra small devices Phones   */

 /* Small devices Tablets  */

 /* Medium devices Desktops */

 /* Large devices Desktops  */

/* Insert Global Vars Here */

/* Insert Main Styles Here */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap - its a 'mobile first/inherit' approach */

/* Please note, you can now use the https://www.betterdairysolutions.co.nz/assets/ rather than https://www.betterdairysolutions.co.nz */

body {
    font-family: Arial, Helvetica, sans-serif;
}

* {border-radius:0 !important}

img {
    max-width: 100%;
    height: auto;
}

.full-width {width:100%;}
.uppercase {text-transform:uppercase;}

a, a:link, a:hover, a:focus {color: green;}

.btn-default { 
  color: #FFFFFF; 
  background-color: green; 
  border-color: green; 
} 
 
.btn-default:hover, 
.btn-default:focus, 
.btn-default:active, 
.btn-default.active, 
.open .dropdown-toggle.btn-default { 
  color: #FFFFFF; 
  background-color: #000; 
  border-color: #000; 
} 
 
.btn-default:active, 
.btn-default.active, 
.open .dropdown-toggle.btn-default { 
  background-image: none; 
} 
 
.btn-default.disabled, 
.btn-default[disabled], 
fieldset[disabled] .btn-default, 
.btn-default.disabled:hover, 
.btn-default[disabled]:hover, 
fieldset[disabled] .btn-default:hover, 
.btn-default.disabled:focus, 
.btn-default[disabled]:focus, 
fieldset[disabled] .btn-default:focus, 
.btn-default.disabled:active, 
.btn-default[disabled]:active, 
fieldset[disabled] .btn-default:active, 
.btn-default.disabled.active, 
.btn-default[disabled].active, 
fieldset[disabled] .btn-default.active { 
  background-color: #0001FB; 
  border-color: #0001FB; 
} 
 
.btn-default .badge { 
  color: #0001FB; 
  background-color: #FFFFFF; 
}

.navbar-inverse { background-color: #000; border:none; border-radius: 0; margin-bottom: 0;}
.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:focus { background-color: #000}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: green}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: green}
.dropdown-menu { background-color: #0001FB}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #FF0000}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.navbar-inverse .navbar-toggle, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color: #FF0000;color: #FFFFFF;border-color: #FF0000;}

.top-text {
    color: #000;
    font-weight: bold;
    font-size: 30px;
    padding-top: 20px;
}

.home-buttons {
    margin-top: 1%;
    margin-bottom: 1%;
}

.home-button {
    padding: 1%;
    cursor: pointer;
}

.home-button .button-wrapper {
    padding: 10px;
    border: 1px solid #787878;
}

@media (min-width: 450px) and (max-width: 767px) {
    .col-custom {
        width: 50%;
    }
}

.home-button .button-wrapper .btn {
    margin-top: 10px;
}

.home-wrapper {
    background-color: #BBBBBB;
    padding: 2.5% 0;
    color: #FFFFFF;
}
.home-wrapper * {
    color: #FFFFFF;
}

footer {
    padding: 1% 0;
}

footer.top-border {
    border-top: 1px solid #787878;
    margin: 3% 0 0;
}

footer * {
    color: #777777 !important;
}

.footer-padding {
    padding-left: 15px;
}

#prev, #next {
    display: none;
}

.valign-middle {vertical-align: middle;}

@media (max-width: 767px) {
    .home-button {
        padding: 10px;
    }
    .xs-no-pull {float:none;width:100%;}
    .xs-text-center {
        text-align: center;
        margin-top: 3%;
        margin-bottom: 3%;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #prev {
        left: 5%;
        display:block;
    }
    #next {
        right: 5%;
        display:block;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-collapse {padding: 0;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {} 
    
/* Stylesheet: SouthernDairySols Modified On 2019-07-11 11:37:14 */
/* How to use (if you want) define the font sizes by the largest viewport first, this will then use a ratio calcualtion to resize on viewport */






 /* Extra small devices Phones   */

 /* Small devices Tablets  */

 /* Medium devices Desktops */


/* Extra small devices (phones, less than 768px) */

h1{
    font-size:23.4px;
}

h2{
    font-size:19.5px;
}

h3{
    font-size:15.6px;
}
h4{
    font-size:11.7px;
}


footer{
    font-size:12px;
}



/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    
    h1{
        font-size:25.2px;
    }

    h2{
        font-size:21px;
    }

    h3{
        font-size:16.8px;
    }
    h4{
        font-size:12.6px;
    }

    
}



/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    
    h1{
        font-size:30.6px;
    }

    h2{
        font-size:25.5px;
    }

    h3{
        font-size:20.4px;
    }
    h4{
        font-size:15.3px;
    }


    footer{
        font-size:13px;
    }

}




/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    
    h1{
        font-size:36px;
    }

    h2{
        font-size:30px;
    }

    h3{
        font-size:24px;
    }

    h4{
        font-size:18px;
    }


    footer{
        font-size:14px;
    }



}
/* Stylesheet: Font Size Ratios Modified On 2014-08-05 15:55:04 */
/*  Important! The Width/Height is now controlled via the CSS, see below  */
/*  The map id matches the current page alias after the '#GoogleMap_'.. see map template for more info */

#GoogleMap_contact-us .Google_Map
{
    height: 350px; 
    width: 100%;
}

.infoBox {
    padding: 0.5em;
    border: 1px solid #555;
    background-color: #fff;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

.m_tooltip {
    padding: 0.5em;
    border: 1px solid #555;
    background-color: #fff;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}
/* Stylesheet: Google Map Modified On 2014-07-17 08:22:18 */