/* 
    Created on : 21-Oct-2015, 16:52:01
    Author     : Justin
*/
/**
0. Imports

1. SETUP
-1.1 Defaults
-1.2 Hyperlinks
-1.3 Typography
  -1.3.1 Typefaces
-1.4 Tables

2. SITE STRUCTURE & APPEARANCE
-2.1 Containers & Columns
-2.2 Navigation
  -2.2.1 Drop-down menus
-2.3 Header
-2.4 Content
  -2.4.1 Slider
-2.5 Sidebar
-2.6 Footer
-2.7 Breadcrumbs
-2.8 Pagination

3. PAGE TEMPLATES
-3.1 Images
-3.2 lists
 -3.2.1 Product lists
-3.3 pages
 -3.3.1 Product Pages
 -3.3.2 Dealer Finder
 -3.3.4 Articles
 -3.3.7 Home Page
-3.4 Page details
-3.5 Subscribe & Connect
 -3.5.1 Mail Chimp

4. MISC
-4.1 Forms
-4.3 jquery hacks
-4.4 twitter widget
-4.5 Bootstrap js
-4.6 social icons
-4.7 google maps 
-4.8 Ekko Lightbox
**/
/*-------------------------------------------------------------------------------------------*/
/* 0. Imports */
/*-------------------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
/*-------------------------------------------------------------------------------------------*/
/* 1. Setup */
/*-------------------------------------------------------------------------------------------*/
/* -1.1 Defaults */
html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 350px;
    /*font: 1.2em/150% Georgia,"Times New Roman",Times,serif;*/
    font-family: Georgia,"Times New Roman",Times,serif;      
    line-height:150%;
    letter-spacing: 0.046875em;
}
small{
    font-size:0.714em;
}
.left{
    float:left;
}
.right{
    float:right;
}
.segment p:last-child{
    margin-bottom:40px;
}
/* 1.2 Hyperlinks */
a {
    color: #003357;
}
.footer a{
    color: #444;
}
.btn-blue {
    color: #fff;
    background-color: #003867;
    border-color: #003867;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.btn-blue:hover {
    color: #fff;
    opacity:0.8;
}
/* -1.3 Typography */
.h1, .h4, .h3, h1, h3, h4{
    color:#003357;
}
.h1, h1 {
    font-size:23px;
    letter-spacing: 0.1em;
    text-transform:uppercase;
    display:inline-block;
    border-bottom:1px solid #003357;
    padding-bottom:4px;
}
.h4,h4{
    border-bottom:1px solid #003357;
    padding-bottom: 0.625em;
    margin-bottom: 1.25em;
}
h6{
    margin: 1.25em 0px;
    color: #545454;
    font-size: 1.125em;
    font-weight: normal;
}
.small{
    font-size:0.785em /*11px */
}
/*-------------------------------------------------------------------------------------------*/
/* 2. SITE STRUCTURE & APPEARANCE */
/*-------------------------------------------------------------------------------------------*/
/* -2.1 Containers & Columns */
body > .container {
    padding: 60px 15px 20px 15px;
}
/* -2.2 Navigation */
.navbar-nav{
    float:right;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:1.263em;/* 22px */
}
.navbar-default .navbar-nav > li > a{
    padding-top:0;
    padding-bottom:26px;
    line-height:30px;
    color:#003357;
}
.navbar-toggle{
    background-color:#FFF;
    margin-top:22px;
    margin-bottom:0;
    padding: 9px 8px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color:#fff;   
}
/* -2.3 Header */
.navbar{
    min-height:56px;
}
.navbar-default{
    background:#FFF url(img/header-stripes.gif) left bottom repeat-x;
    border:none;     
    border-bottom:10px solid #fff;
}
.navbar-brand{
    padding:0;
    padding-top:29px;
    height:27px;
}
.navbar-brand span{
    display: block;
    text-indent: -9999em;
}
/* -2.4 Content */
.page-header{
    border:none;
    margin-top:20px;
}
/* -2.6 Footer */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 350px;
}
.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid #DDD;
    background: transparent url("img/watermark.gif") no-repeat scroll 50% 10px;
    margin: 0px auto;    
}
.footer-base{
    border-top: 1px solid #DDD;
    padding-top: 0.625em;
    line-height: 1em;    
    text-decoration: none;
}
.footer .control-label{
    font-size:0.857em;
}
.social{
    margin-top:40px;
}
/* 2.8 Pagination */
.pagination-list{
    padding:0;
    list-style:none;
}
.pagination{
    margin-top:4px;
}
.pagination > a {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857;
    text-decoration: none;
    background-color: #FFF;
    border: 1px solid #DDD;
}
.pagination > .jp-current, .pagination > a:hover.jp-current, .pagination > a:focus.jp-current {
    z-index: 2;
    color: #FFF;
    cursor: default;
    background-color: #428BCA;
    border-color: #428BCA;
}
.pagination-sm > a:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.pagination-sm > a:first-child {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
/*-------------------------------------------------------------------------------------------*/
/* 3. PAGE TEMPLATES */
/*-------------------------------------------------------------------------------------------*/
/* -3.1 Images */
.hero-img{
    margin-top:30px;
}
.article-img{
    width: 35.087719298%;/* 400px */
    margin-left:2.631578947%;/*30px */
    margin-bottom:1.57894736842em;
}
.item-img blockquote{
    border:none;
}
.item-img a{
    display:block;    
}
.gallery a{
    display:block;
    width:80px;
    height:80px;
    margin-right: 4px;
    margin-bottom: 4px;
}
/* -3.2 Lists */
/*-3.2.1 Product lists */
.list{
    /*    width:29.824561403%;/* 320px */
    /*    margin-left: 1.754385964%;20px */
    /*    margin-right: 1.754385964%;20px */
    margin-bottom: 0.95em;
}
.list a{
    display:block;
}
.list-title{
    height:48px;
}
.list-desc{
    height:45px;
}
.list span{
    font-size:1.5em;
}
.ui-list {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width:800px;
}
.ui-list_item {	
    border-top: 1px solid #EEE;
    clear: both;
}
.ui-list_item:first-child {
    border-top: none;
}
.no-line{
    border:none;
}
.ui-list-title {
    display: inline-block;
    font-weight: bold;
    text-align: right;
    width: 24%;	
    padding-top: 0.5em;	
}
.ui-list-info{
    display:inline-block;
    width:74%;
    float:right;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* -3.3 pages */
/* -3.3.1 Product Pages */
.item-content p:first-child{
    font-weight: bold;
}
.item-content{
    border-right:1px solid #AAA;
    padding-right: 30px;
    padding-bottom:40px;
}
/* -3.3.4 Articles */
.media{
    margin-bottom:30px;
}
.media-object{
    width:150px;
    margin-top:34px;
}
.page-top{
    display:inline-block;
    font-size:0.6875em;
}
.reynolds img{
    margin:0 auto;
}
/* 3.3.7 Home Page */

.catalogue{
    margin-bottom:0.875em;
    display: block;
}
.carousel{
    margin-top:30px;
}
/* Fade transition for carousel items */
.carousel-control.left,
.carousel-control.right {
    float:none;
    background-image:none;
}
/*.carousel .item {
    left: 0 !important;
      -webkit-transition: opacity .4s; adjust timing here 
         -moz-transition: opacity .4s;
           -o-transition: opacity .4s;
              transition: opacity .4s;
}*/
/*.carousel-control {
    background-image: none !important;  remove background gradients on controls 
}*/
/* Fade controls with items */
/*.next.left,
.prev.right {
    opacity: 1;
    z-index: 1;
}*/
/*.active.left,
.active.right {
    opacity: 0;
    z-index: 2;
}*/
/* -3.4.4 Dealer / Stockist */
.stockist-list{
    padding-bottom:6px;
}
.map-panel > div{
    min-height:200px
}
/*-------------------------------------------------------------------------------------------*/
/* -3.5 Subscribe & Connect */
/*-------------------------------------------------------------------------------------------*/
/* -3.5.1 Mail Chimp */
.club-logo{
    margin:20px auto;
    display:block;
} 
/*-------------------------------------------------------------------------------------------*/
/* 4. Misc */
/*-------------------------------------------------------------------------------------------*/
/* -4.4 twitter widget */
#twitter-feed ul{
    padding:0;
    list-style:none;
    font-size:0.785em; /*11px */
    color:#999;
}
#twitter-feed a {
    color:#0F3B64;
}
/* -4.5 Bootstrap js */
.tab-pane {
    margin-top:2em;
    margin-bottom:2em;
}
/* -4.6 social icons */
.social a {
    opacity:0.7; 
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
}
.social a:hover{
    opacity:1;
}
.facebook:hover{
    color:#3B5998;
}
.twitter:hover{
    color:#6CADDE;
}
.instagram:hover{
    color:#231F20; 
}
/* -4.7 google maps */
.gm-map{   
    height:430px;
}
.gm-map > div {
    padding:0;	
}
.gm-marker p,
.gm-marker h4 {
    font-size:1em!important;
}
.gm-marker h4,
.gm-result h4 {
    margin:2px 0;
    font-family: "Francois One";
    line-height: 1em;
    text-transform: uppercase;
}
.gm-result h4{
    height:41px;
}
.main-content .gm-marker span,
.main-content .gm-result span {
    display:block;
    padding-bottom:4px;
    color: #777777;
    font-size: 0.75em;
    font-style: italic;
}
.gm-result > div {
    width:28.333333%;
    margin:0 2% 0.375em 2%;
    padding-left:1%;
    border-bottom:1px solid #DDDDDD;
    height:123px;	
    float:left;    
}
.gm-marker p,
.gm-result > div p {
    margin-bottom:2px;
    text-transform:lowercase;
    line-height:1.2em;
}
.gm-marker p::first-letter,
.gm-marker p.postcode{
    text-transform:uppercase;
}

/* -4.8 Ekko Lightbox */
.ekko-lightbox .modal-content{
    width:70%;
    margin:20px auto;
}
.pdf-view{
    position: relative;
    padding-bottom: 60%;
    height: 0;
    overflow: hidden;
}
.pdf-view object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.instagram{
    padding:0 4px 8px 4px;
}
/* contact form */
#contact-form .form-group{
    margin-bottom:24px;
}
.custom-select.is-invalid, 
.form-control.is-invalid, 
.was-validated 
.custom-select:invalid, 
.was-validated .form-control:invalid {
    border-color: #dc3545;
}
#contact-form .form-group .invalid-entry {
    position: absolute;
    bottom: -20px;
    left: 20px;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
} 
#contact-form .form-group .invalid-text {
    color: #dc3545;
    font-size:90%;
}