@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');


body {
font-family: 'Heebo', sans-serif;
padding-top: 56px;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

.navbar .navbar-nav > li .navbar-item ,
.navbar .navbar-brand{color: #503c2b;}

.navbar li a {color: #000 !important;}

.green-backround{background: #abcd37;}

.white-backround{background: #fff;}

.grey-backround{background: #efefef;}

.text-green{
    color: #000;
    text-shadow: 2px 2px 19px #fff;
}

.active{
    background: #abcd37;
    border-top-left-radius: 5px;
	border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.logo-header{position:fixed; top:6px;}

.mobileonly {
	display: none;
}

.desktoponly {
	display: block;
}

#items div{position: relative;}

.product-menu-title{
    z-index: 1;
    position: absolute;
    color: #000000;
    text-shadow: 2px 2px 5px #FFFFFF;
    bottom: 5%;
    right: 5%;
    font-size: 21px;
}

.primary-underline{
  --s:23px;    /* height of the line */
  --c:#fff; /* color*/
 /* old  #06CC6B*/
	
  text-decoration: none;
  display: inline-block;
  background:
    radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom right/var(--s) var(--s),
    radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom left /var(--s) var(--s),
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - var(--s)) var(--s);
  background-repeat:no-repeat;
  
}

.collectibles{
	position: absolute;
    top: 0px;
    right: 0px;

	z-index: 1;
}

.yellow-mark{
    display: inline-block;
    opacity: 0.9;
    background-color: #ffae00;
    padding-right: 10px;
    padding-left: 10px;
    -webkit-box-shadow: -11px 10px #000000;
    box-shadow: -10px -10px #000000;
}

.h1-mark-box{
    display: inline-block;
    opacity: 0.9;
    background-color: #abcd37;
    padding-right: 10px;
    padding-left: 10px;

}

.sold{
	position: absolute;
    top: 0px;
    left: 0px;

	z-index: 12;
}


.red-mark{			  display:inline-block;
			opacity: 0.9;
            background-color: #000;
            color: #fff;
			   padding-right: 10px;
  padding-left: 10px;}



.pro-mark{			  display:inline-block;
			opacity: 0.9;
            background-color: #b86e26;
            color: #fff;
			   padding-right: 10px;
  padding-left: 10px;}

.pageborder-home{border: 4px solid #fff;}

.pageborder-grey{border: 4px solid #abcd37;}


.rightleftborder{
    border-right: 4px solid #fff;
    border-left: 4px solid #fff;
	border-top: 4px solid #fff;
}

.grey-rightleftborder{
    border-right: 4px solid #abcd37;
    border-left: 4px solid #abcd37;
	border-top: 4px solid #abcd37;
}

.black-border{
    border: 1px solid #000;
}

.green-border{
    border: 3px solid #abcd37;
}


.body-green-backround{background-color: #abcd37;}
.body-black-backround{background-color: #000;}

.pedding-up-down{
    padding-top: 13px;
    padding-bottom: 35px;
}

.pedding-up-down-header{
    padding-top: 13px;
    padding-bottom: 35px;
}	




#home-hero h1{
    position: absolute;
    color: #000;
    font-size: 55px;
    text-shadow: 5px 5px 21px rgba(255,255,255,0.65);
    top: 3%;
    
    text-align: right;
    font-weight: bold;
}

h2{
    font-size: 38px;
}




.befor-footer {
    background-color: #000;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
    color: hsla(0,0%,100%,1.00);
    margin-top: 0px;
}



@media screen and (min-width: 1200px) {
    .container {
        max-width: 1200px
    }
}




@media screen and (min-width: 1400px) {
    .container {
        max-width: 80%
    }
}




@media (max-width:767px){
	
	body {

padding-top: 55px;
}
	
	.container {
        height: auto
    }

			.desktoponly {
		display: none;
	}

	.mobileonly {
		display: block;
	}
	
		.logo-header{position:fixed;   left: 50%;
  transform: translate(-50%, 0%);}
	
		.product-menu-title{
    font-size: 14px;
}
	
.pedding-up-down{
    padding-top: 38px;
    padding-bottom: 35px;
}
	
.pedding-up-down-header{
    padding-top: 18px;
    padding-bottom: 15px;
}		
	
#home-hero h1 {
	font-size: 22px;
	bottom: 29.6%;
}

h2{
    font-size: 20px;
}	
	
	.yellow-mark{


    box-shadow: -5px -5px #000000;
}
	

}