@import url('/_hcms/raw-resource?path=Golden%20Spirit%20Alpaca%202023/css/layout.css&portalId=23882849&t=1699635631790&hs_preview_key=rfpiV-hEeNCvuV_d9qp_Cw&template_id=100167785530');
@import url('//cdn2.hubspot.net/hub/23882849/hub_generated/template_assets/100163407722/1674833288970/Golden_Spirit_Alpaca_2023/css/theme-overrides.min.css');
@import url('//cdn2.hubspot.net/hub/23882849/hub_generated/template_assets/100163407723/1677773152867/Golden_Spirit_Alpaca_2023/css/header.css');
@import url('//cdn2.hubspot.net/hub/23882849/hub_generated/template_assets/100162377085/1677780464284/Golden_Spirit_Alpaca_2023/css/footer.min.css');

  
/***********************************************/
/* This css file would in theory work
 * to connect all other css files to the main page. 
 * */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* GLOBAL ATTRIBUTES*/


:root {
  --background-color: #f5efe4;
  --accent-orange:#ff9900;
  --accent-green:#009999;
  --text-brown:#666633;
  --light-brown:#cc9966;
  --footer-ribbon:#663300;
  --text-grey:#666666;
  --highlight-gold:#ffcc00;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

html,body{
  padding:0;
  margin:0;
  width: auto!important; 
  overflow-x: hidden!important;
  background-color:var(--background-color) !important;
}

* {
  box-sizing: border-box;
}


/* HOMEPAGE SCROLL */

#our-story{
scroll-margin-top:7rem;
}

#adopt-an-alpaca, #contact {
  scroll-margin-top:6.25rem;
}

#board-buy{
  scroll-margin-top: 7rem;
}

#tour-our-ranch{
  scroll-margin-top: 5.95rem;
}

#adopt-an-alpaca{
  scroll-margin-top: 7.75rem;
}

#community{
  scroll-margin-top: 7.75rem;
}

#contact{
scroll-margin-top: 7.75rem;
}


/* ALL ABOUT ALPACA SCROLLING*/

#aaa-intro {
  scroll-margin-top:7.25rem;
}

#aaa-faq {
  scroll-margin-top:0rem;
}

#housing {
  scroll-margin-top:7.5rem;
}

#pasture {
  scroll-margin-top:7rem;
}

#heat {
  scroll-margin-top:7rem;
}

#medical {
  scroll-margin-top:7rem;
}

#transport {
  scroll-margin-top:7rem;
}

#dietary {
  scroll-margin-top:8rem;
}

#manure {
  scroll-margin-top:7rem;
}



.home{
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
}

.container-fluid{
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

h1, h2, h3{
  font-family: 'Cormorant Garamond', cursive !important;
}

h1{
  font-family: 'Cormorant Garamond', serif !important;
  color:var(--accent-green) !important;
  font-size:3rem;
}

h2{
  font-size:2.75rem;  
}

h3{
  font-size:1.35rem;
}

p, a{
	font-family: 'Noto Sans', sans-serif;
  list-style: none;
  text-decoration:none !important;
}

img{
cursor:pointer;
}


ul{
  list-style: none;
}

.container-fluid{
 gutter-x: 0rem !important;
}

.gold-border-container{
  border-left:0.75rem solid #b39e7b;
  background:#fff !important;
  border-radius:0.5rem;
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}


/* AAA ASPECTS */

.aaa-aspects-heading{
  color:var(--accent-green);
}

.aaa-aspects-heading img{
  width:64px !important;
  height:64px !important;
  object-fit:contain;
  margin-left:0.5rem;
}

.aaa-aspects h3{
  font-family: 'Noto Sans', sans-serif !important;
}

.aaa-aspects-heading img {
  width:56px !important;
}

.aaa-aspects p{
  font-size:0.75rem;
}

.aaa-aspects ul li{
margin-left:-2rem;
font-size:0.75rem;
}

footer{
  background:var(--background-color);
}

.arrow-to-top{
  margin-right:.65rem;
}

/* 768px */
/* @media(min-width:48rem){
  .aaa-aspects p{
    font-size:1rem;
  }
  
  .aaa-aspects ul li{
    font-size:1rem;
    
  }
} */
  






/* 1a. Containers */




/* 1b. Colors */




/* 1c. Typography */


























/* 1d. Buttons */







/* 1e. Forms */












/* 1f. Tables */









/* 1g. Website header */







/* 1h. Website footer */







.content-wrapper {
  max-width: 1240px;
}

.dnd-section,
.content-wrapper--vertical-spacing {
  padding: 80px rem;
}

.dnd-section > .row-fluid {
  max-width: 1240px;
}





html {
  font-size: 24px;
}

body {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #425b76;
  font-size: 24px;
}

/* Paragraphs */

p {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
}

/* Anchors */

a {
  font-weight: normal; text-decoration: none; font-family: Lato, sans-serif; font-style: normal;
  color: #0270E0;
}

a:hover,
a:focus {
  font-weight: normal; text-decoration: none; font-family: Lato, sans-serif; font-style: normal;
  color: #0048b8;
}

a:active {
  font-weight: normal; text-decoration: none; font-family: Lato, sans-serif; font-style: normal;
  color: #2a98ff;
}

/* Headings */

h1,
.h1 {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 50px;
  text-transform: none;
}

h2,
.h2 {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 38px;
  text-transform: none;
}

h3,
.h3 {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 30px;
  text-transform: none;
}

h4,
.h4 {
  font-weight: normal; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 24px;
  text-transform: none;
}

h5,
.h5 {
  font-weight: normal; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #000000;
  font-size: 16px;
  text-transform: none;
}

h6,
.h6 {
  font-weight: normal; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 14px;
  text-transform: none;
}

/* Blockquote */

blockquote {
  border-left-color: #F8FAFC;
}





button,
.button {
  border: 1px solid #425b76;

  padding-top: 15px;
padding-right: 53px;
padding-bottom: 15px;
padding-left: 53px;

  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none
  ;
  background-color: ;
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 22px;
  text-transform: none;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  background-color: rgba(26, 51, 78, 1.0);
  border-color: #1a334e;
}

button:active,
.button:active {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  background-color: rgba(106, 131, 158, 1.0);
  border-color: #6a839e;
}






form,
.submitted-message {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
}

/* Form title */

.form-title {
  color: #F8FAFC;
}

/* Labels */

form label {
  color: #425b76;
}

/* Help text */

form legend {
  color: #425b76;
}

/* Inputs */

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  border: 2px solid #D1D6DC;

  background-color: ;
  color: #425b76;
  border-radius: 3px;
}

/* Form placeholder text */

::-webkit-input-placeholder {
  color: #425b76;
}

::-moz-placeholder {
  color: #425b76;
}

:-ms-input-placeholder {
  color: #425b76;
}

::placeholder {
  color: #425b76;
}

/* Inputs - date picker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: #425b76;
}

.fn-date-picker td.is-selected .pika-button {
  background: #425b76;
}

.fn-date-picker td .pika-button:hover {
  background-color: #425b76 !important;
}

.fn-date-picker td.is-today .pika-button {
  color: #425b76;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  border: 1px solid #425b76;

  padding-top: 15px;
padding-right: 53px;
padding-bottom: 15px;
padding-left: 53px;

  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  background-color: ;
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 22px;
  text-transform: none;
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: rgba(26, 51, 78, 1.0);
  border-color: #1a334e;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: rgba(106, 131, 158, 1.0);
  border-color: #6a839e;
}





/* Table */

table {
  border: 1px solid #425b76;

  background-color: ;
}

/* Table cells */

td,
th {
  border: 1px solid #425b76;

  padding: 18px;

  color: #425b76;
}

/* Table header */

thead th {
  background-color: ;
  color: #FFFFFF;
}

/* Table footer */

tfoot td {
  background-color: ;
  color: #425b76;
}





.header {
  background-color: ;
}

.menu__link,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  color: #425b76;
  font-family: Lato;
}

.menu__child-toggle-icon {
  border-top-color: #425b76;
}

.menu .menu__link:hover,
.menu .menu__link:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: #1a334e;
}

.menu__child-toggle-icon:hover,
.menu__child-toggle-icon:focus {
  border-top-color: #1a334e;
}

.menu .menu__link:active,
.header__language-switcher-label-current:active,
.header__language-switcher .lang_list_class li a:active {
  color: #6a839e;
}

.menu__child-toggle-icon:active {
  border-top-color: #6a839e;
}

.menu .menu__item--depth-1 > .menu__link--active-link:after {
  background-color: #425b76;
}

@media (min-width: 767px) {
  .menu .menu__submenu,
  .header__language-switcher .lang_list_class {
    border: 2px solid #425b76;

    background-color: ;
  }

  .menu__submenu--level-2 > .menu__item:first-child:before {
    border: 2px solid #425b76;

    background-color: ;
  }
}

.menu__submenu .menu__link,
.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus {
  color: #425b76;
  background-color: ;
}

.header__language-switcher .lang_list_class:before {
  border-bottom-color: #425b76;
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus,
.header__language-switcher .lang_list_class li:hover,
.menu__submenu--level-2 > .menu__item:first-child:hover:before,
.menu__submenu--level-2 > .menu__item:first-child.focus:before {
  background-color: ;
}

.header__language-switcher .lang_list_class.first-active::after {
  border-bottom-color: ;
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  font-family: Lato;
}

.header__language-switcher-label-current:after {
  border-top-color: #425b76;
}

@media(max-width: 767px) {
  .header__navigation {
    background-color: ;
  }

  .header__navigation-toggle svg,
  .menu-arrow svg {
    fill: #425b76;
  }
}





.footer {
  background-color: ;
}

/* Footer content */

.footer p,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer label,
.footer span,
.footer li,
.footer img {
  color: #425b76;
}





.blog-post,
.blog-header__inner,
.blog-related-posts {
  padding: 80px 0;
}

/* Blog post */

.blog-post__meta a {
  color: #425b76;
}

.blog-post__tag-link {
  color: #425b76;
}

.blog-post__tag-link:hover,
.blog-post__tag-link:focus {
  color: #1a334e;
}

.blog-post__tag-link:active {
  color: #6a839e;
}

/* Blog related posts */

.blog-related-posts__title-link,
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus,
.blog-related-posts__title-link:active {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  text-transform: none;
}

.blog-related-posts__title-link {
  color: #425b76;
}

.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus {
  color: #1a334e;
}

.blog-related-posts__title-link:active {
  color: #6a839e;
}

/* Blog comments */

.blog-comments {
  margin-bottom: 80px;
}

#comments-listing .comment-reply-to {
  color: #0270E0;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: #0048b8;
}

#comments-listing .comment-reply-to:active {
  color: #2a98ff;
}





.hs-search-results__title {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
}





/* Blog listing */

.blog-index__post-title-link,
.blog-index__post-title-link:hover,
.blog-index__post-title-link:focus,
.blog-index__post-title-link:active {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  text-transform: none;
}

.blog-index__post-title-link {
  color: #425b76;
}

.blog-index__post-title-link:hover,
.blog-index__post-title-link:focus {
  color: #1a334e;
}

.blog-index__post-title-link:active {
  color: #6a839e;
}

.blog-index__post-tag,
.blog-index__post-author-name {
  color: #425b76;
}

/* Blog pagination */

.pagination__link-text,
.pagination__link--number {
  color: #425b76;
}

.pagination__link:hover .pagination__link-text,
.pagination__link:focus .pagination__link-text,
.pagination__link--number:hover,
.pagination__link--number:focus {
  color: #1a334e;
}

.pagination__link:active .pagination__link-text,
.pagination__link--number:active {
  color: #6a839e;
}

.pagination__link-icon svg {
  fill: #425b76;
}

/* Pricing card */

.card__price {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 30px;
}

.card__body svg {
  fill: #425b76;
}

/* Social follow */

.social-links__icon {
  background-color: #425b76;
}

.social-links__icon:hover,
.social-links__icon:focus {
  background-color: #1a334e;
}

.social-links__icon:active {
  background-color: #6a839e;
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal;
  color: #425b76;
  font-size: 30px;
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


@media(min-width:10px){
header{
  position:relative !important;
  height:auto !important;
}

.navbar{
  position:fixed !important;
  top:0;
  height:auto !important;
  transition: all 0.5s ease;
}

/*ON SCROLL*/

.navbar.small {
  background-color:var(--background-color) !important;
  height:auto !important;
  transition: all 0.25s ease;
  z-index:999;
  border-bottom:1px solid var(--footer-ribbon);
  background:none;
}

.navbar.small ~ .offset {
  padding-top: 100px;
}

.navbar.small .desktop-menu li a{
  color:#666;
}

.navbar.small .desktop-menu li.dropdown-item-sub-sub a{
  color:#fff;
}


.navbar.small .desktop-menu li a:hover{
  color:var(--green) !important;
}

.navbar.small .logo-container{
  display:flex;
  align-items:center;
  justify-content:center;
  background-repeat:no-repeat;
  background-size:100%;                                                                                                          
  background-position:center;
} 

.desktop-menu li a{
  color:#fff;
}

.nav-link-divider{
  color:white !important;
}

.navbar.small .nav-link-divider{
  color:#666 !important;
}


/* TOGGLER */
.navbar-toggler{
  border:none !important;
}

.navbar-toggler:hover{
  background:none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none !important;
  box-shadow: none !important;
  border:none !important;
  background:none !important;
}

.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
}

.nav-item a:hover{
  font-weight:bold !important;
  color:var(--green) !important;
}

.nav-item a:hover{
  font-weight:bold !important;
  color:var(--green) !important;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar.small .fa-bars{
color:var(--accent-orange); !important;
}

.navbar.small .nav-button{
  border:2px solid #666 !important;  
}

.navbar.small .nav-button:hover{
  border:2px solid var(--green) !important;  
}


/* ASSOCIATE LOGIN */  

.nav-button{
  border:2px solid #101010 !important;  
  border-radius:36px;
/*   padding:0px 24px; */
/*   margin:4px 0px 8px 0px; */
  font-weight:400 !important;
  text-align:center;
}


.mobile-nav li a{
color:#0099cc !important;
}

.dropdown-item-mobile a:hover{
color:var(--accent-orange) !important;
cursor:pointer;
}


/*MOBILE DROPDOWN*/

.main-nav-item-mobile{
 color:var(--footer-ribbon);  
 cursor:pointer;
}
  
.main-nav-item-mobile:hover{
 color:var(--accent-orange);  
}
  
/* ATTRIBUTES ACROSS ALL VIEW-WIDTHS */
  
.desktop-menu li a{
  font-size:0.75rem !important;
  font-weight:bold !important;
  color:var(--footer-ribbon) !important;
}

.desktop-menu li a:hover{
   font-weight:bold !important;
   color:var(--accent-orange) !important;
}
  
.nav-phone-text{
  font-weight:bold;
  text-decoration:none;
  border:1px solid var(--footer-ribbon);  
  padding:0.5rem 1rem;
  border-radius:1.5rem;
  color:var(--footer-ribbon) !important;
}
  
.nav-phone-text:hover{
  font-weight:bold; 
  color:var(--accent-orange) !important;
}
  
.nav-phone-text{
  font-weight:bold;
  text-decoration:none;
  border:1px solid var(--footer-ribbon);  
  padding:0.5rem 1rem;
  border-radius:1.5rem;
}
 
.nav-phone-text img{
margin-right:0.25rem;  
}
  
.nav-phone-text:hover{
border:1px solid var(--accent-orange);    
}

}


/*DESKTOP ONLY*/
/*1400px*/

@media(min-width:1400px){
  

.offcanvas{
display:none !important;  
}
  
  
.navbar-toggler, .navbar-toggler-icon{
  display:none !important;
}
  

.desktop-menu{
  display:flex !important;
  flex-direction:row;
/*   align-items:center;
  justify-content:center; */
}
  
.navbar.small .desktop-menu{
  display:flex !important;
  flex-direction:row;
  align-items:center;
  justify-content:center;
 }

}
   
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.footer{
width:100%;
display:flex;
justify-content:center;

}

.footer-container{
padding-top:1rem;
padding-bottom:1rem;
}

.row{
display:flex;
flex-direction:column;
border:0.063rem solid transparent;
}

.col-md-4{
display:flex;
justify-content:center;
align-items:center;
}

.footer-logo img{
border:0.125rem solid transparent !important;
width:100% !important;
/* margin-left:-0.75rem !important; */

}

.footer-links a{
font-size:0.75rem;
color:#101010;
text-decoration:none;
margin:.25rem;
margin-left:0.75rem;
}

.social-title p{
border-bottom:1px solid var(--accent-orange);
color:var(--footer-ribbon);
padding-bottom:0.25rem;
margin-bottom:0.5rem;
}

/* 768px */
@media(min-width:48rem){
.row{
flex-direction:row;
}
  
.col-md-4:nth-child(1){
justify-content:flex-start;
}
  
.col-md-4:nth-child(3){
justify-content:flex-end;
}
}