/** CUSTOM CSS FOR PUBLIC PAGES **/

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Colours
2.0 CCB
3.0 Vines

99.0 Misc

Media Queries
--------------------------------------------------------------*/

:root {
    --bs-primary:#4f5259;
    --bs-primary-rgb:79, 82, 89;
    --bs-secondary:#a9a4a1;
    --bs-secondary-rgb:169, 164, 161;
    --bs-tertiary:#66ab9c;
    --bs-tertiary-rgb:102, 171, 156;
    --bs-danger: #d9534f;
}

.btn-primary { background-color:var(--bs-primary); border-color:var(--bs-primary); text-transform:uppercase;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color:var(--bs-primary); border-colorvar(--bs-primary); box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1);}
.btn-secondary { background-color:var(--bs-secondary); border-color:var(--bs-secondary); text-transform:uppercase; color:#fff;}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background-color:var(--bs-secondary); border-color:var(--bs-secondary); box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1);}
.btn-tertiary { background-color:var(--bs-tertiary); border-color:var(--bs-tertiary); text-transform:uppercase; color:#fff;}
.btn-tertiary:hover, .btn-tertiary:active, .btn-tertiary:focus { background-color:var(--bs-tertiary); color:#fff; border-color:var(--bs-tertiary); box-shadow:inset 0 0 0 1000px rgba(0,0,0,.2);}
.btn-guest { background-color:#fff; border-color:#ccc; text-transform:uppercase; color:#3a3a3a;}
.btn-guest:hover, .btn-guest:active, .btn-guest:focus { background-color:#66ab9c5c; border-color:#adadad; color:#fff; box-shadow:inset 0 0 0 1000px rgba(0,0,0,.2);}
.btn:disabled { background-color:var(--bs-secondary); border-color:var(--bs-secondary); text-transform:uppercase; color:#fff; }

.border-primary { border-color:var(--bs-primary)!important; }
.border-secondary { border-color:var(--bs-secondary)!important; }

.text-tertiary { color:var(--bs-tertiary); }
.bg-tertiary { background-color:var(--bs-tertiary); color:#fff; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: 'Playfair Display', serif; color:var(--bs-primary); text-transform:uppercase; }

body { padding-top:100px; background-color:#f4f2f1; color:var(--bs-primary); }

.navbar { height:100px; border-bottom:1px solid var(--bs-primary); }
.navbar-brand {margin: 0; color: var(--bs-primary); font-size: 1.5rem; font-family: 'Playfair Display', serif!important; }
.nav-item { margin-right:0.7rem;}

footer { background-color:var(--bs-primary); color:#ffffff; }
footer h3 { color:var(--bs-secondary); }
footer a { color:#ffffff; }
footer a:hover { color:var(--bs-secondary); }

/*--------------------------------------------------------------
2.0 Shared
--------------------------------------------------------------*/

.hero-banner { color:#fff; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hero-banner img { max-height:250px; }
.form-label { font-weight:400; }

/*--------------------------------------------------------------
3.0 CCB
--------------------------------------------------------------*/

.ccb-hero { background:  linear-gradient(rgba(var(--bs-primary-rgb), 0.6), rgba(var(--bs-primary-rgb), 0.6)), url("../images/ccb/guest-accommodation.jpg") no-repeat center center; background-size: cover; }

/*--------------------------------------------------------------
4.0 Vines
--------------------------------------------------------------*/

.vines-hero { background: linear-gradient(rgba(var(--bs-primary-rgb), 0.6), rgba(var(--bs-primary-rgb), 0.6)), url("../images/vines/vines-building-panoram.jpeg") no-repeat center center; background-size: cover; }

/*--------------------------------------------------------------
99.0 Media Queries
--------------------------------------------------------------*/

@media (max-width: 767px) {

}

@media (max-width: 480px) {
    /*--------------------------------------------------------------
    2.0 Shared
    --------------------------------------------------------------*/
    .hero-banner img { max-width:250px; }
}