@charset "UTF-8";
/* CSS Defined by F3 Designs (February 2019) f3designs.ca */


/* CUSTOM COLOUR PALETTE ================================================================================================ */
/* green-brand: #60765a */
/* green: #75894f */
/* purple-brand: #705b75 */
/* purple: #885075 */
/* black: #262626 */


/* CUSTOM FONTS: ADOBE TYPEKIT =========================================================================================== */
/* Raleway (Regular):
	font-family: raleway, sans-serif;
	font-weight: 400;
/* Brandon Grotesque (Thin, Light):
	font-family: brandon-grotesque, sans-serif;
	font-weight: 100;
	font-weight: 300;
	
	
/* CUSTOM FONTS: GOOGLE FONTS ============================================================================================ */
/* Playfair Display (Regular):
	font-family: 'Playfair Display', serif;	
	font-weight: 400;
	

/* MEDIA QUERIES ======================================================================================================== */
/* Smartphones (portrait and landscape)
@media (min-width: 320px) and (max-width: 568px) {
 ...
}
/* Tablets (portrait and landscape)
@media (min-width: 768px) and (max-width: 1024px) {
 ...
}
/* Tablets (portrait)
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
 ...
}
/* Tablets (landscape)
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 ...
}


/* TYPE SELECTORS ======================================================================================================== */
html, body {
	height: 100% !important;
	font-family: raleway, sans-serif;
	font-weight: 400;
	color: #ffffff;
	-webkit-font-smoothing: antialiased; /* resolves issue with font displaying much bolder than it should in Mac Chrome and Safari */
	-moz-osx-font-smoothing: grayscale; /* resolves issue with font displaying much bolder than it should in Mac Firefox */
	text-align: center !important;
	margin: 0px auto 0px auto !important;
	scroll-behavior: smooth;
}
p {
	margin: 0px auto 30px auto;
	line-height: 24px;
}
h1 {
	font-family: 'Playfair Display', serif;	
	font-weight: 400;
	margin: 0px auto 60px auto;
	color: #262626;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
h1 {
	margin: 0px auto 30px auto;
	font-size: 32px !important;
}
}


/* MISCELLANEOUS CLASSES ================================================================================================== */
/* fontawesome */
.fontawesome {
	color: #60765a;
	font-size: 36px;
	margin: 30px auto 30px auto;
}
.fontawesome:link {
	color: #60765a;
}
.fontawesome:visited {
	color: #60765a;
}
.fontawesome:hover {
	color: #262626;
}
.fontawesome:active {
	color: #60765a;
}
/* pipe */
.pipe {
	padding: 0px 15px 0px 15px;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.pipe {
	display: none;
}
}
/* flex (equalizes col height) */
.flex {
	display: -webkit-flex; /* css3 flexbox (equalizes col height) */
	display: -ms-flexbox;   /* css3 flexbox (equalizes col height */
	display: flex; /* css3 flexbox (equalizes col height */
	overflow: hidden; /* css3 flexbox (equalizes col height */
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.flex {
	display: inline;
}
}
/* Tablets (portrait and landscape) */
@media (min-width: 768px) and (max-width: 1024px) {
.flex {
	display: inline;
}
}
.container {
}
.container-fluid {
	padding: 0px !important;
}
.row {
}
[class*="col-"] {
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
[class*="col-"] {
}
}
/* Tablets (portrait) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
[class*="col-"] {
}
}


/* BUTTONS =============================================================================================================== */
/* btn-default */
.btn-default {
	font-family: brandon-grotesque, sans-serif;
	font-weight: 300;
	color: #ffffff;
	background-color: #262626;
	border-color: #262626;
	border-radius: 30px;
	text-transform: none;
	font-size: 24px;
	text-shadow: none;
	margin: 0px 10px 15px 10px;
}
.green {
	background-color: #75894f;
	border-color: #75894f;
}
.purple {
	background-color: #885075;
	border-color: #885075;
}
.btn-default:link {
}
.btn-default:visited {
}
.btn-default:hover {
	color: #ffffff;
	background-color: #262626;
	border-color: #ffffff;
}
.btn-default:active {
}
/* btn-scroll-down */
.btn-scroll-down {
	color: #ffffff;
	background-color: transparent;
	border-color: #ffffff;
	border-radius: 100%;
	text-transform: none;
	font-size: 24px;
	text-shadow: none;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	width: 45px;
	height: 45px;
}
.btn-scroll-down:link {
}
.btn-scroll-down:visited {
}
.btn-scroll-down:hover {
	color: #262626;
	border-color: #262626;
}
.btn-scroll-down:active {
}
/* btn-scroll-up */
.btn-scroll-up {
	color: #262626;
	background-color: transparent;
	border-color: #262626;
	border-radius: 100%;
	text-transform: none;
	font-size: 24px;
	text-shadow: none;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	width: 45px;
	height: 45px;
	margin-bottom: 45px;
}
.btn-scroll-up:link {
}
.btn-scroll-up:visited {
}
.btn-scroll-up:hover {
	color: #262626;
	border-color: #262626;
}
.btn-scroll-up:active {
}


/* JUMBOTRON =========================================================================================================== */
.jumbotron {
	background-image: url(../img/bg-jumbotron.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0px;
	width: 100%;
	height: 100%;
	background-position: top;
	margin-right: 0px !important;
	margin-bottom: 0px !important;
	margin-left: 0px !important;
}
.jumbotron-border {
	outline: 1px solid #ffffff;
	outline-offset: -30px;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.jumbotron-border {
	outline-offset: -15px;
}
}
.jumbotron p {
	font-family: brandon-grotesque, sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 24px;
	margin: 0px auto 15px auto;
	/* text-shadow: h-shadow v-shadow blur-radius color; */
}
.jumbotron h1 {
	font-size: 48px;
	border-top: solid 1px #ffffff;
	display: inline-block;
	color: #ffffff;
}
.jumbotron img {
	margin: 30px auto 30px auto;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.jumbotron img {
	margin: 15px auto 30px auto;
	max-width: 100px;
}
}
.jumbotron .scroll-down {
  position: absolute;
  width: 100%;
  right: 0px;
  bottom: 45px;
  left: 0px;
  text-align: center;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.jumbotron .scroll-down {
	display: none;
}
}
.jumbotron .scroll-down p {
	text-transform: none;
	margin: 0px auto 5px auto
}


/* CONTENT ============================================================================================================= */
.content-index {
	color: black;
}
.content-index h1 {
	margin: 180px auto 120px auto;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.content-index h1 {
	margin: 90px auto 60px auto;
}
}
.content-index .row h1 {
	color: #ffffff;
	border-top: solid 1px #ffffff;
	display: inline-block;
	margin: 60px auto 60px auto;
}
.content-index .row p {
	padding: 0px 30px 0px 30px;
	color: #ffffff;
}
.btn p {
}
/* row1col1 (About Alpacas) */
.content-index .row1col1 {
	background-color: #262626;
		
	display: flex;
	justify-content: center;
	flex-direction: column;
}
/* row1col2 (Events) */
.content-index .row1col2 {
}
.content-index .row1col2 h1 {
	border-top: none;
}
.content-index .row1col2 .halter {
	background:linear-gradient(0deg,rgba(38,38,38,0.3),rgba(38,38,38,0.3)),url(../img/bg-keystonealpacaclassic.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 657px;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.content-index .row1col2 .fibre {
	background:linear-gradient(0deg,rgba(38,38,38,0.3),rgba(38,38,38,0.3)),url(../img/bg-funwithfibre.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 657px;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.events-border {
	outline: 1px solid #ffffff;
	outline-offset: -30px;
}
/* row2col1 (Show Results) */
.content-index .row2col1 {
	background-color: #705b75;
		
	display: flex;
	justify-content: center;
	flex-direction: column;
}
/* row2col2 (Membership) */
.content-index .row2col2 {
	background-color: #262626;
		
	display: flex;
	justify-content: center;
	flex-direction: column;
}


/* FOOTER ============================================================================================================== */
footer {
	color: #262626;
	font-family: brandon-grotesque, sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin: 120px auto 30px auto;
}
footer img {
	margin: 0px auto 120px auto;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
footer img {
	max-width: 100px !important;
}
}
footer ul {
	padding: 0px;
}
footer li {
	display: inline;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
footer li {
	display: block;
}
}
footer li a:link {
	color: #885075;
}
footer li a:visited {
	color: #885075;
}
footer li a:hover {
	color: #885075;
	text-decoration: underline;
}
footer li a:active {
	color: #885075;
}


/* MODAL =============================================================================================================== */
.modal-header h3 {
	color: #262626;
}
.modal-body p {
	color: #262626;
	margin: 6px 0px 0px 6px !important;
	font-size: 18px !important;
}
.modal-body a:link {
	color: #75894f;
	text-decoration: underline;
}
.modal-body a:visited {
	color: #75894f;
	text-decoration: underline;
}
.modal-body a:hover {
	color: #75894f;
	text-decoration: underline;
}
.modal-body a:active {
	color: #75894f;
	text-decoration: underline;
}


/* 404 NOT FOUND ======================================================================================================== */
.notfound {
	height: 100%;
}
.notfound-message {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 360px;
	width: 100%;
	text-align: center;
	color: #000000;
}
.notfound-message img {
	margin: 0 auto !important;
	text-align: center !important;
}