/* CSS Document */
/* 
Theme Name:   monkey-storefront
Theme URI:    https://monkeyandco.com
Description:  Monkey - storefront child theme
Author:       Sandra
Author URI:   https://monkeyandco.com
Template: storefront 
Version: 1.0.0 
*/

/* =Theme customization starts here
-------------------------------------------------------------- */
@font-face {
  font-family: 'amatic-sc-local';font-display: swap;
    src: url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/AmaticSC-Regular.ttf) format('trutype'),
      url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/AmaticSC-Regular.woff) format('woff');
}
@font-face {
  font-family: 'fredericka-local';font-display: swap;
  src: url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/FrederickatheGreat-Regular.ttf) format('trutype'),
      url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/FrederickatheGreat-Regular.woff) format('woff');
}
@font-face {
  font-family: 'chilanka-local';font-display: swap;
  src: url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/Chilanka-Regular.ttf) format('trutype'),
      url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/Chilanka-Regular.woff) format('woff');
}
@font-face {
  font-family: 'stencil-local';font-display: swap;
  src: url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/Lintsec.ttf) format('trutype'),
      url(//monkeyandco.com/wp-content/themes/monkey-storefront/fonts/Lintsec.woff) format('woff');
}

body {
font-family: 'amatic-sc-local', sans-serif;
font-size: 1.3em;
line-height: 1em;
min-height: 100%;
background: #FFF;
	color: #333;
}

/*.site-header {
	background-color: #000000;	
	height: 160px;
    background-image: url(//monkeyandco.com/wp-content/uploads/2023/01/HeaderMedia_1950x500_100.svg);
	/*background-image: url(//monkeyandco.com/wp-content/uploads/sites/2/2022/10/HeaderMedia_1950x500.svg);
	background-position:top center;
	padding-top: 0.9em;
    background-color: black;
    background-repeat: no-repeat;
}
.site-header .custom-logo-link {
	display: block;
	margin-top: 0;
	margin-bottom: auto;

}*/
.layout-image {
    height: 250px;
    max-width: 200px;
}
/*.site-branding .custom-logo{
	width: 814px;
	height: 178px;
}
img.custom-logo {
width: 814px;
aspect-ratio: auto 814 / 178;
height: 178px;
}*/
.site-header .site-branding img {
height: auto;
max-width: 380px;
max-height: none;
}
.site-branding, .site-search, .site-header-cart, .site-logo-anchor, .site-logo-link, .custom-logo-link {
margin-bottom: 0em;
}
.storefront-primary-navigation {
clear: both;
height: 80px;
}
header#hmain .navbar {
font-size: 0.9em;
border-top: 0px solid #CCC;
border-bottom: 0px solid #CCC;
width: 100%;
text-align: right;
	position: relative;
	top: -15px;
/*background-color: black;
position: sticky;*/

}

header#hmain .navbar a:link {
	color: white;
}
header#hmain .navbar a:visited {
	color: white;
}
header#hmain .widgets .widget {
vertical-align: top;
text-align: left;
}

header#hmain .header-inner .container {
padding-bottom: 0px;
}

header .site-header {
	background-image: url(//monkeyandco.com/wp-content/uploads/sites/2/2022/10/HeaderMedia_1950x500.svg);
}

footer#bottom {
	background-color: #fff;
	
}
.center {
  text-align: center;
}
.white-text{
	color: white;
}
.large-title{
	/*font-family: fredericka-the-greatest, serif;*/
    font-family: 'fredericka-local', serif;
	font-weight: 400;
	font-size: 3.0em;
	font-style: normal;
    line-height: 1.3;
}
.large-text{
    line-height: 1.3;
}

#monkey-content{
    /*height: 100vh;*/
	font-family: chilanka-local, sans-serif;
	font-style: normal;
	font-weight: 400;
}
.hero-text{
	
}
.hero-text-content monkey-stencil{
	font-family: stencil-local, sans-serif;
	font-weight: 400;
	font-style: normal;
	
}
.hero-text-title{
	
	animation: clear 0.8s 0.5s forwards;
	/*animation-delay: 2s;*/
	transform: translateY(10rem);
	opacity: 0;
	/*transform: scale(0.9);*/
}
.hero-text-content{
	
	animation: clear 1s 0.7s forwards;
	/*animation-delay: 2s;*/
	transform: translateY(10rem);
	opacity: 0;
    display: inline;
    text-align: center;
    align-content: center;
	/*transform: scale(0.9);*/
}
.header-cue{
	/*position: absolute;
	bottom:0;
	animation: clear 0.5s 1.5s forwards;*/
	animation: clear 1s 0.7s forwards;

	transform: translateY(2rem);
	z-index: 1;
	overflow: hidd0en;
}

.header-cue-icon {
	animation: clear 1s 1.5s forwards, pulse 2s 4s ease-in-out infinite;
	transform: translateY(-2rem);
	z-index: 1;
	overflow: hidden;
	opacity: 1;
}

@keyframes clear{
	to{
		opacity: 1;
		transform: none;
	}
}
@keyframes slide-down {
  from {
    transform: translateY(-2rem);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: none;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (min-width: 768px) {
    .site-header {
        background-color: black;	
        background-size: auto 75px;
        background-image: url(//monkeyandco.com/wp-content/uploads/2023/01/HeaderMedia_1950x500_100_2.svg);
        background-repeat: repeat-x;
        background-position:top left;
        /*padding-top: 0.9em;*/
       
}
  	/*resizing the logo image */
	#masthead .custom-logo-link img {
		width: auto;
		height: 90px;
	}
  
	/*positioning the main-navigation */
	#masthead .main-navigation {
		text-align: right;
		position: fixed;
		right: 300px;
		padding: 0;
		width: auto;
	}
  	
	
	/*positioning the logo*/
	#masthead .custom-logo-link {
		position: fixed;
		top: 0;
		margin: 0;
		padding: 0;
	}
    /*adjusting default margins and paddings*/
    #masthead .site-header-cart .cart-contents{
        padding:1em 0;
    }
    #masthead .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
        padding: 1em 1em;
    }
    #masthead .site-branding{
        margin-bottom: 1em;
    }
	
	/*positioning the cart-menu */
	/*#masthead .site-header-cart {
		width: 14% !important;
		position: fixed !important;
		top: 0;
		right: 12%;
		padding: 0;
	}*/
	
	/*applying the position fixed on the masterhead */
	#masthead{
		position: fixed;
		top: 0;
		width: 100%;
        height: 130px;
	}
    
    /*removing the site search*/
    #masthead .site-search{
        display:none;
    }
}