@charset "utf-8";

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
// <slant>: Use a value from -10 to 0

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" <slant>;
}

body {
	margin: 0px;
	padding:0px;
	width: 100%;
	font-size: 1.25rem !important;
	background-color: #fff;
	font-family: "Inter", sans-serif;
}

html {

  scroll-behavior: smooth;

}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    font-variation-settings: "slnt" -10;
}

h1.entry-title {
	font-size: 3rem;
}
hr {
	margin-top:3rem !important;
	margin-bottom:3rem !important;
}
.entry-content li {
	margin-bottom: .75rem;
}

.headerhero {

	position: relative;
	
	height:100vh;

	width:100%;
	
	text-align: center;

	background-image: url("../images/spicerack camera back dos.jpg");

	background-size: cover;
	
	background-attachment: fixed;
	
	background-position: center right;
	
	background-repeat: no-repeat;

}

.logohero {

	text-align: center;
	
    width:75%;

	margin-right: auto;

	margin-left: auto;
	
    filter: drop-shadow(3px 5px 10px rgb(0 0 0 / 0.6));
	
	position: absolute;
	
	top:50%;
	
	left:50%;
	
	transform: translate(-50%,-50%);

}

div.navbar-brand > a:hover {
	color: #fff;
}

.has-dark-blue-background-color {
	background-color: #3F7285;
	background-image: url("images/callme background.svg");
	background-size:cover;
	background-position: center;

}
.has-dark-blue-background-color a, .has-dark-blue-background-color a:hover {
	color:#fff !important;
	text-decoration: underline;
}
.has-greenstudio-background-color {
	background-image: url("images/studio-back2.jpg");
	background-size: cover;
	background-position:bottom center;
	background-attachment: fixed;
}

@media (orientation: portrait) {
	
	.scroller-background {
	position: relative;
	height:100vh;
    width:100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.has-greenstudio-background-color {
	background-image: url("images/studio-back2.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
}

.headerhero {
	
	margin-top: -1rem;

	position: relative;

	width:100%;
	
	text-align: left;

    background-image: url("../images/spicerack camera back dos.jpg");

	background-size: cover;
	
	background-attachment: scroll;
	
	background-position: center center;
	
	background-repeat: no-repeat;
	
	height: 90vh;
}
.logohero {
	
	padding:2rem;
	
	position: absolute;
	
	top:50%;
	
	left:50%;
	
	transform: translate(-50%,-50%);

	text-align: left;

    width:100%;

	margin:0px;
	
    filter: drop-shadow(3px 5px 10px rgb(0 0 0 / 0.6));

}

}

.fullwidthhack {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}

.spaceme {

	padding-bottom: 3.75rem;

    padding-top: 4.125rem;

}
.has-car {
	background-image: url(images/fj-beach-large.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: #4199a3
}
.has-waves {
	background-image: url("images/waves-tmc.svg");
	background-size: cover;
	background-position:50% 50%;
	background-color: #4199a3;
}
.has-waves a, .has-waves a:hover {
	color:#FFD592;
}

.has-brand-background-color {

	background: #0A3E77;

}

.has-brand-color {

	color:#0A3E77;

}

.wp-block-gallery{

	margin-top:1em;

}

.has-darkgrey-color {

	color:#222;

}

.has-darkgrey-background-color {

	background:#222;

}
.has-orange-background-color {
	background-color: #ff9c0d;

	background-image: url("images/seaoats-has-orange.svg");
	
	background-size: cover;
		
	background-position: bottom left;
	
	background-repeat: no-repeat;

}


.has-orange-background-color a, .has-orange-background-color a:hover {
	color:#3D8F92 !important;
}


#content.site-content {

	background-color:#fff;

		color:#222;



}

.form-control {

	border-color:#222 !important;

}

.mobilecallsticky {

    background:#A72626;

    width:100%;

    color:#fff;

    padding:2rem;

    text-align: center;

}

.mobilecallsticky:hover, .mobilecallsticky:focus  {

    color:#fff;

}

@media only screen and (max-width: 575px) {

    .site-footer {

        padding-bottom: 9rem !important;

    }
	

}
.btn-yellow {
	background-color: #FAA21B;
	color:#fff;
}
#btn-back-to-top {

  position: fixed;

  bottom: 80px;

  right: 20px;

  display: none;

}

.nav-link {

    color: #fff !important;

}
figure {
    margin: 0;
}
#content.site-content {
  padding:0px;
}
.padmetop {
	padding-top: 4.15rem !important;
}
.has-white-color h1, .has-white-color h2, .has-white-color h3, .has-white-color h4, .has-white-color h5 {
	color: #fff;
}

@media (orientation: landscape) {
.scroller-background {
	position:relative;
	height:100vh;
    width: 100%;
    background-attachment: fixed;
    background-position: center 4rem;
    background-repeat: no-repeat;
    background-size: cover;
}
	.full-img-caption {
	position: absolute;
	width:33%;
	bottom:33%;
	left:25%;
}
}
header#masthead {
    background-color: #262922;
}
@media (max-width: 1199px) {
	a.dropdown-item{
    color: #fff !important;
}
}
@media only screen and (max-width: 575px){
footer.entry-footer {
    padding-bottom: 0rem;
}
}
/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media (orientation:portrait) {
	
	.full-img-caption {
	position: absolute;
	width:calc(100%-2rem);
	bottom:33%;
	left:2rem;
}
	.locationmap {
	aspect-ratio:2/1;
}
}


@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 1199px) {
  .navbar-dark .dropdown-item {
    color: #fff;
  }
  .navbar-nav .dropdown-menu {
    background: transparent;
    box-shadow: none;
    border: none;
  }
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
  html {
    font-size: 85%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  html {
    font-size: 80%;
  }
		.scroller-background {
			position:relative;
	height:100vh;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
	#footer-widget > div > div > div {
		margin-bottom: 3rem;
	}
	#footer-widget > div > div > div {
		text-align:center;
	}
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
  html {
    font-size: 75%;
  }
}
@media (max-width:1199.98px){
	.nav-item {
		text-align: center;
	}
	.menuitemwithphoto {
		gap:1rem;
	}
	a.nav-link.buttonize {
		margin-bottom: .2rem;
		width:100%;
	}
}



.buttonize {
	display:inline-block;
	color:#fff !important;
	margin-right:.5rem;
	border-style:solid;
	border-width: 1px;
	border-color: #fff;
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
  color: #eee;
  padding: 0.5rem;
  font-weight: 500;
  font-size: 1.25rem;
}
.foodname {
    margin-bottom: 0em;
}
h1.has-background.menusectionhead, h2.has-background.menusectionhead, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
    padding: 0.75rem 0.75rem;
	margin-bottom:2rem;
}
.foodmenu h3 {
	font-size: 1.75rem;
	font-style: italic;
	font-weight:normal;
}
.foodmenu h2 {
	font-size: 2.5rem;
	margin-bottom: 2rem;
	border-bottom: thin solid #464646;
}

.btn-donate {
    color: #111;
    background-color: #f2cd5e;
    border-color: #f2cd5e;
}
.logorightthing {
	/* background-image: url("images/logobackgroundright.svg"); */
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}
.ccwfootertag {
    text-align: center;
    color: #fff;
    display: block;
    padding: 0;
    font-weight: 600;
}
.btn-donate, .btn-donate:hover {
    background-color: #f2cd5e;
    font-size: 2rem;
    color: #54280E;
    border-radius: 0px;
    padding: 1rem;
}
footer#colophon {
  font-size: 85%;
}
body:not(.theme-preset-active) footer#colophon {
  color: #fff;
  background-color: hsla(0,0%,0%,0.00);
}
#footer-widget h2 {
	color: #52c1c1;
}
.has-brand-background-color a {
	color:#fcb900;
}
.type-page {
	padding-bottom: 4rem;
}
.fillimage100 > img {
	min-width: 100%!important;
}
.btn-primary {
	background-color:#3A74BA;
	border-color:#3A74BA;
}
.btn-primary:hover {
	background-color:#265b99;
	border-color:#265b99;
}
a.btn-warning {
	color:#212529!important;
}
.red {
	color:#C00003;
}
.has-black-color.has-orange-background-color a{
	color: #000;
	text-decoration: underline;
}
ul {
	margin-left:0px;
	padding-inline-start: 20px;
}
.header-call-to-action {
	color:#F2CD5E;
	background-color: #202535;
	border: none;
	font-weight: 900;
}
.has-car a, .has-car a:hover {
color:#F2CD5E;
}
.full-img-caption h2 {
	font-size: 4rem;
	padding-bottom: 0px;
}
.text-drop-shadow {
	text-shadow: #000 1px 1px 3px;
}
.svg-opacity img {
	opacity:.40;
}
:where(.logo-arranger) {
    gap: 7% !important;
}
.logo-arranger {
padding-left:4rem;
	padding-right:4rem;
}
.mission, .bios, .contact, .logos {
	margin-top:16rem;
	margin-bottom:16rem;
}
.copyright{
	margin-top:16rem;
	margin-bottom:4rem;
}
a {
	text-decoration: underline;
	color:hsla(0,0%,14%,1.00);
}
a:hover {
	text-decoration: underline;
	color:hsla(0,0%,5%,1.00);
}
.logos-delay-1 {
	animation-delay: .25s;
}
.logos-delay-2 {
	animation-delay: .5s;
}
.logos-delay-3 {
	animation-delay: .75s;
}
.logos-delay-4 {
	animation-delay: 1s;
}
.logos-delay-5 {
	animation-delay: 1.25s;
}
.logos-delay-6 {
	animation-delay: 1.5s;
}
.logos-delay-7 {
	animation-delay: 1.75s;
}
.logos-delay-8 {
	animation-delay: 2s;
}
.logos-delay-9 {
	animation-delay: 2.25s;
}
.logos-delay-10 {
	animation-delay: 2.50s;
}
.logos-delay-11 {
	animation-delay: 2.75s;
}
.parallax-window {
	height: 100vh;
	background: transparent;
}
.animateme {
	opacity: 0%;
}