p, span, h1, h2, h3, h4, h5, a {
    font-family: 'Open Sans', sans-serif;
}

canvas ~ h4 {
    text-align: center;
    font-weight: bold;
}
canvas ~ h4 small {
    letter-spacing: 3px;
    font-size: 12px;
    
    padding-top: 20px;
    padding-bottom: 8px;
    
    display: block;
}

a.navbar-brand {
   font-weight: 900; 
}
canvas {
    margin: 0 auto;
    display: block;
}

.thumbnail, .progress-bar {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.thumbnail.red, .progress-bar-red {
    background-color: #e64759;
}
.thumbnail.green, .progress-bar-green {
    background-color: #1bc98e;
}
.thumbnail.blue, .progress-bar-blue {
    background-color: #1ca8dd;
}
.thumbnail.purple, .progress-bar-purple {
    background-color: #9f86ff;
}
/*
.thumbnail.red h2 {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.thumbnail.red:hover h2 {
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 1);
}*/

.thumbnail.red:hover, .progress-bar-red:hover {
    background-color: #b13845;
}
.thumbnail.green:hover, .progress-bar-green:hover {
    background-color: #16966b;
}
.thumbnail.blue:hover, .progress-bar-blue:hover {
    background-color: #1c84ac;
}
.thumbnail.purple:hover, .progress-bar-purple:hover {
    background-color: #7a67c4;
}
.thumbnail {
    
}
.thumbnail h2 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: white;
    
    margin-top: 30px;
    margin-bottom: 25px;
}
.thumbnail h2 small {
    color: inherit;
    font-size: 12px;
    letter-spacing: 3px;
    text-align: center;
    display: block;
    padding-bottom: 8px;
}
.thumbnail h2 span.glyphicon {
    font-size: 12px;
}


/* NEWCASTLE COFFEE YO */
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
.row {
    margin-left: 0;
    margin-right: 0;
}

nav.navbar-default {
    background-color: transparent;
    border: none;
    border-radius: 0;
}
.center-nav {
    /*max-width: 300px;*/
    text-align: center;
}
.center-nav .navbar-nav {
    float: none;
}
.center-nav .navbar-nav>li {
    float: none;
    display: inline-block;
}
div.center-nav ul.navbar-nav>li>a {
    font-weight: 600;
    color: #eeee;
}
.hero h1 {
    font-weight: 800;
    letter-spacing: 8px;
    color: white;
    
    font-size: 3em;
}
.hero h1 small {
    font-weight: 300;
    display: block;
    margin-top: 8px;
    letter-spacing: 4px;
    color: #d3d3d3;
    
    font-size: 0.5em;
}
.hero>h1, .hero>h1>small {
    position: relative;
}
.hero {
    margin-top: 18em;
    padding-bottom: 20em;
}
.beach-bg {
    /*background-image: url("/img/moody_castle_alt.jpg");*/
    background-image: url("/img/nobbys-beach-sm.jpg");
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    
    -webkit-transition:-webkit-filter 0.4s ease-in-out;  
    transition:filter 0.4s ease-in-out;  
    
}
.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}
h2 {
    font-weight: 700;
    text-transform: uppercase;
}
.why-bg {
    background-image: url("/img/giant_quote.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    background-attachment: fixed;
}
section.why, section.results {
    margin-top: 80px;
    vertical-align: top;
    overflow: auto;
    display: block;
    
    padding-top: 15em;
    padding-bottom: 18em;
    /*border-bottom: solid thin #eee;*/
    
    
}
section.why h2, section.how h2, section.results h2, section.who h2 {
    font-size: 3em;
    /*letter-spacing: 3px;*/
    
    letter-spacing: 18px;
    text-align: center;
    font-weight: 900;
}

section.why p, section.results p, section.who p {
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    
    font-weight: 300;
    letter-spacing: 4px;
    color: #7c7c7c;
}

/*
section.why h2 {
    display: block;
    max-width: 100px;
    float: left;
    vertical-align: top;
    margin-top: 0;
    padding-right: 40px;
}
section.why p {
    font-size: 20px;
    
    display: block;
    max-width: calc(100% - 120px);
    float: left;
} */
section.why p .quote {
    display: none;
}
section.how {
    margin-top: 40px;
    
    border: thin solid #eeeeee;
    background-color: #f5f5f5;
    padding: 60px 0px 60px;
}
.how-section h2 {
    text-align: center;
    margin-top: 45px;
}
section.how h2 {
    text-align: center;
    margin-bottom: 45px;
}
/*
section.results {
    margin-top: 80px;
    vertical-align: top;
    overflow: auto;
    display: block;
    
    padding-bottom: 30px;
}
section.results h2 {
    display: block;
    max-width: 160px;
    float: left;
    vertical-align: top;
    margin-top: 0;
    padding-right: 40px;
}
section.results p {
    font-size: 20px;
    
    display: block;
    max-width: calc(100% - 170px);
    float: left;
} */

.results-bg {
    background-image: url("/img/logo-bg-washed.jpg");
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
.results-list {
    padding: 40px;
    background-color: white;
    
    -webkit-box-shadow: 0 8px 30px 2px rgba(0,0,0,0.2);
    box-shadow: 0 8px 30px 2px rgba(0,0,0,0.2);
    
    margin-top: -12em;
    margin-bottom: 12em;
}
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
    .results-list {
        padding: 20px;
    }
}

/*
section.results {
    margin-top: 80px;
    vertical-align: top;
    overflow: auto;
    display: block;
    
    padding-top: 3em;
    padding-bottom: 12em;
}
*/
/*
section.results h2 {
    font-size: 3em;
    
    letter-spacing: 18px;
    text-align: center;
    font-weight: 900;
}

section.results p {
    font-size: 1.5em;
    
    text-align: center;
    letter-spacing: 5px;
}
*/

section.who {
    margin-top: 140px;
    vertical-align: top;
    overflow: auto;
    display: block;
    
    margin-bottom: 180px;
}
section.who h2 {
    /*display: block;
    max-width: 160px;
    float: left;
    vertical-align: top;
    margin-top: 0;
    padding-right: 40px;*/
    
    font-size: 3em;
    /*letter-spacing: 3px;*/
    
    letter-spacing: 18px;
    text-align: center;
    font-weight: 900;
}
section.who p {
    /*font-size: 20px;
    
    display: block;
    max-width: calc(100% - 170px);
    float: left;*/
    
    font-size: 1.5em;
    
    text-align: center;
    letter-spacing: 5px;
}

/* RESULTS Section */
.panel h4.panel-title {
    font-weight: 600;
}
.panel {
    box-shadow: none;
    -webkit-box-shadow: none;
}
div.panel {
    background-color: transparent;
}
.panel-group .panel-heading + .panel-collapse>.panel-body {
    border-top: none;
}
h4.panel-title a:hover, h4.panel-title a:focus {
    text-decoration: none;
    color: #0078c1;
}
.result-bar {
    width: 100%; margin-top: 5px; margin-right: auto; display: block; text-align: left; background-color: #d3d3d3; height: 10px; 
}
.result-bar-inner {
    background-color: #0078c1; height: 10px; width: 50%;
}
.cafe-content.panel-body {
    position: relative;
    padding: 15px 0 0;
    background-color: #eee;
    margin-top: 15px;
}
.cafe-content .badge {
    position: absolute; top: 15px; left: 35px; border-radius: 100%; font-size: 14px; height: 28px; width: 28px; line-height: 22px; text-align: center; background-color: #e7a53d;
}
.cafe-content small {
    display: block;
    padding-top: 10px;
}
.cafe-content p {
    margin-top: 20px;
    font-size: 16px;
}
.pos {
    font-weight: 800;
    color: #e7a53d;
}
.stats-section {
    background-color: white;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.stats-section h5 {
    font-weight: 700;
}
.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
    font-size: 0.5em;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}

.how-panel, .latte-bg {
    background-image: url("/img/single_latte.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.note-bg {
    /*background-image: url("/img/notepad.jpg");*/
    background-image: url("/img/logo-bg-washed.jpg");
    background-attachment: fixed;
    /*background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;*/
}
.latte-bg > .row {
    background-color: rgba(0,0,0,0.7);
}
.how-panel > .row {
    background-color: rgba(0,0,0,0.7);
    padding-top: 16em;
    padding-bottom: 18em;
}
.how-panel > .row h2 {
    font-size: 3em;
    font-weight: 900;
    letter-spacing: 18px;
}
.how-panel small {
    font-size: 0.6em;
    line-height: 1.3;
    margin-top: 12px;
    display: block;
}
.how-panel {
    max-height: 596px;
}

.colour-table {
    width: 80%;
}
.colour-table td {
    padding: 40px 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}


td {
    color: white;
}
.red-bg {
    background-color: #cd1635;
}
.maroon-bg {
    background-color: #602648;
}
.blue-bg {
    background-color: #0078c1;
}
.green-bg {
    background-color: #9bb937;
}
.yellow-bg {
    background-color: #e7a53d;
}
.aqua-bg {
    background-color: #0aaba4;
}
.purple-bg {
    background-color: #5e286f;
}
.grey-bg {
    background-color: #eeeeee;
}
.red {
    color: #cd1635;
}
.maroon {
    color: #602648;
}
.blue {
    color: #0078c1;
}
.green {
    color: #9bb937;
}
.yellow {
    color: #e7a53d;
}
.aqua {
    color: #0aaba4;
}
.purple {
    color: #5e286f;
}
.grey {
    color: #eeeeee;
}
.white {
    color: #ffffff;
}