:root {
  --primary: #47ad80;
  --secondary: #dea671;
}


html,
body {
	width: 100%;
	min-height: 100vh;
}

body{
    
	background-image: url('https://medosa.hogo.app/img/background/bg-main.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	min-height: 100vh;

    
}

header{
	display: flex;
    z-index: 2000;
    position: sticky;
}

h1, h2, h3 {
	
/*	font-family: 'Poiret One', cursive;
	font-family: 'Montserrat', Sans-serif;*/
	font-family: 'Alex Brush', cursive!important;

	
}

h5 {
	font-size: 1.8rem!important;
	letter-spacing: 1px;
}

#logo {
    
    /*height: 100vh;*/
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: flex-start; /* align vertical */    
    
}

#socials {
	padding-top:10px;
}

#socials_title{
	padding-top:100px;
	color:var(--primary)!important;

}


#scroll{
	
	display: flex;
    justify-content: center;
    align-items: flex-start;
	
}

#catHeader {
	
	margin-top: 125px;
}


.text-custom {
	
	
	color:#47ad80;
}

.catTitle {
    
    color:var(--secondary)!important;
	height: 1rem;
    
}

.shadow-custom {
  text-shadow: 2px 2px 4px #000000;
}

/* STREAK */

.cat-item {
    height: 75px;
}

.cat-item.cat-item-photo {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.catTitleWrapper {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content:center;
    
}

.navbar-dark .navbar-brand {
   color: var(--primary)!important;
}

.navbar.navbar-dark .breadcrumb .nav-item.active>.nav-link:hover, .navbar.navbar-light .navbar-nav .nav-item.active>.nav-link:hover, .navbar.navbar-light .navbar-toggler {
    color: #fff;
}

.navbar.navbar-dark .navbar-toggler-icon {
    background-image: url('https://assets.hogo.app/img/svg/hamburger1.svg?color=47ad80');
}

.bg-black {
    background-color: rgba(255, 169, 0, 0.8);
}

.navbar-nav {
    float:none;
    margin:0 auto;
/*    display: flex;
    text-align: center;*/
}

.navbar {
    
    border-bottom: 1px solid var(--secondary);
	background-position: center center;
	background-attachment: fixed;
}

.navbar-nav > li {
    display: block;
    float:none;
    line-height:0.9rem;
}

.navbar-brand, .navbar-item-link {
	font-family: 'Alex Brush', cursive!important;
	text-transform:none;
	font-weight: 400;
	
}

.navbar-item-link {

	font-size:2rem;
	line-height: 4rem;
}

.navbar-item-link:hover {
	color:#D24346;
}

.border-main {
	
	color:#ff0b0b!important;
}

.card {
    background-color: transparent;
    border-bottom: 0px dotted rgba(0,0,0,.125);
    border-radius: 0rem;
    -webkit-box-shadow:0;
    box-shadow:none;
}

.card-desc span {	
	font-family: 'Lato', sans-serif;
	text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
	font-size: 1.1rem!important;
}

.card-title {
	font-family: 'Alex Brush', cursive!important;
	text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
	font-size: 2.2rem!important;
}

.card-price span {
	
	color:var(--secondary)!important;;
	font-family: 'Lato', sans-serif;
	text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
	font-size: 1rem;
	
 }

.bg-black {
opacity: .9;	

}

.btn {
	color:#fff;
	font-family: 'Lato', sans-serif;
	text-transform:uppercase;
	font-weight: 400;
	border:0px solid #B7B4B4;
	
}

.btn-main {
	background-color:var(--secondary)!important;

}

.redColor {
	color:#ff0b0b;
	
}

.primayColor {
	color:#46af7d!important;

}

.redDark {
	color:#670000;
	
}

.card-desc {
	
	font-size: 1rem;
	font-style: normal;
}


.divider
{
	position: relative;
	margin-top: 65px;
	height: 1px;
}


.cat-divider
{
	position: relative;
	margin-top:5px;
	margin-bottom: 25px;
	height: 20px;
	background: url(https://medosa.hogo.app/img/cat/cat-divider.svg);
	background-position: top center;
	background-repeat: no-repeat;
}

.span-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
/*	background-image: linear-gradient(to right, transparent, rgb(156,156,156), transparent);
*/	background-image: linear-gradient(to right, transparent, rgb(222, 166, 113), transparent);
}


.span-arrow-down:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -7px;
	left: calc(50% - 7px);
	width: 14px;
	height: 14px;
	transform: rotate(45deg);
	background-color: white;
	border-bottom: 1px solid rgb(48,49,51);
	border-right: 1px solid rgb(48,49,51);
}

.span-tab-down:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: calc(50% - 10px);
	width: 20px;
	height: 14px;
	background-color: white;
	border-bottom: 1px solid rgb(48,49,51);
	border-left: 1px solid rgb(48,49,51);
	border-right: 1px solid rgb(48,49,51);
	border-radius: 0 0 8px 8px;
}

.span-stopper:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -6px;
	left: calc(50% - 7px);
	width: 14px;
	height: 12px;
	background-color: white;
	border-left: 1px solid rgb(48,49,51);
	border-right: 1px solid rgb(48,49,51);
}

.span-dot:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -5px;
	left: calc(50% - 9px);
	width: 10px;
	height: 10px;
	background-color: #a56a34;
	border: 1px solid rgb(48,49,51);
	border-radius: 50%;
/*	box-shadow: inset 0 0 0 0px goldenrod,
					0 0 0 0px goldenro*/;
}

/* Hogo SVG fill */
svg.cls-2{
	
	fill:#47AD80;
}


#logo img {
    
    
    width:220px;		

}

@media only screen and  (min-width: 320px){
		
		#logo img {

			width:280px;		
		}
	
		.catTitle {

			font-size: 4rem!important;
		}  
		
	}

@media only screen and  (min-width: 576px){
		
		#logo img {

			width:300px;		
		}
		
		.catTitle {

			font-size: 4rem!important;
		} 	
	}


@media only screen and  (min-width: 768px){
		
		#logo img {

			width:440px;		
		}
	
		.catTitle {

			font-size: 4rem!important;
		} 		
		
	}
	@media only screen and  (min-width: 992px){
		
		#logo img {

			width:550px;		
		}

		 .catTitle {

			font-size: 4rem!important;
		}   
       
	}

/* Scroll down icon */
/* Stuff that matters. */
@keyframes scroll {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(100px);
	}
}

svg #wheel {
	animation: scroll ease 1.5s infinite;
}

/* Default stuff. */
*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

#socials a:hover{
	color:#FFF!important;
}

i.fab{
    color:var(--primary)!important;
	font-size:2rem;
	padding:0px 10px;
}