/*
root_colors
*/
:root{
	--first:#001934;
	--second:#aa00d4;
	--mybg: #b2b2b2;
}


/* text */
.text-first{
	color: var(--first);
}

.text-second{
	color: var(--second);
}


/* root_bg */
.bg-first{
	background-color: var(--first);
}

.bg-second{
	background-color: var(--second);
}

.bg-third{
	background-color: var(--third);
}

.bg-four{
	background-color: var(--four);
}


/*
* button
*/
.btn-100{
	width: 100%;
}

.btn-my{
	background-image: linear-gradient(180deg, var(--first), var(--second));
	color: #fff;
}

.btn-my:hover{
	background-color: var(--mybg);
	filter: brightness(85%);
	color: #ffffff;
}


.btn-first{
	background-color: var(--first);
	color: #fff;
}

.btn-first:hover{
	background-color: var(--first);
	filter: var(--second);
	color: #ffffff;
}

.btn-second{
	background-color: var(--second);
	color: #fff;
}

.btn-second:hover{
	background-color: var(--second);
	filter: brightness(85%);
	color: #ffffff;
}

.btn-black{
	background-color: #000000;
	color: #ffffff;	
}

.btn-black:hover{
	background-color: #000000;
	color: #ffffff;
	filter: brightness(85%);
}


/* coustom checkbox */
.form-check-input:checked{
	background-color: #000000;
}



/* 
* text 
*/
.verticalCenter{
	vertical-align: middle;
}


.text-left{
	text-align: left;
}

.text-center{
	text-align: center;
}

.text-right{
	text-align: right;
}

.text-justify{
	text-align: justify;
}

.supplierName{
	font-size: 2em;
}


.text-05{
	font-size: .5em; 
}

.text-06{
	font-size: .6em; 
}

.text-07{
	font-size: .7em; 
}

.text-08{
	font-size: .8em; 
}

.text-09{
	font-size: .9em; 
}

.text-1{
	font-size: 1em; 
}

.text-12{
	font-size: 1.2em; 
}

.text-15{
	font-size: 1.5em; 
}

.text-2{
	font-size: 2em; 
}

.cart-text{
	font-size: 1em;
}



/*
* border
*/

.border-second{
	border-color: var(--second);
}

.br-5{
	border-radius: .5em;
}

.br-10{
	border-radius: 1em;
}

.br-15{
	border-radius: 1.5em;
}

.br-20{
	border-radius: 2em;
}

.loginBorder{
	border-radius: 5px;
	border: 1px solid #dfdfdf;
}

.border-radius{
	border-radius: 5px;
	background-color: #008278;
}


/*
* a style
*

a{
	text-decoration: none;
	color: #ffffff;
	//background-color: #008278;
}


a:hover{
	text-decoration: none;
	background-color: #004039;
	color: #ffffff;
}

#text-link-blue{
	text-decoration: none;
	background-color: none;
	color: #007bff;
}

a::after{
	background-color: none;
	color: blue;
}
*/



/*
* bars
*/
.bar1, .bar2, .bar3{
	width: 30px;
	height: 2px;
	margin: 8px auto;
	color: #ffffff;
	background-color: #ffffff;
}




/*
* margin, padding
*/
.mt-50{
	margin-top: 50px;
}

.mt-75{
	margin-top: 75px;
}

.mt-80{
	margin-top: 80px;
}

.mt-90{
	margin-top: 90px;
}

.mt-100{
	margin-top: 100px;
}

.mt-125{
	margin-top: 125px;
}

.mt-150{
	margin-top: 150px;
}

.mt-200{
	margin-top: 200px;
}

.mt-225{
	margin-top: 225px;
}

.mt-250{
	margin-top: 250px;
}

.mt-300{
	margin-top: 300px;
}

.mt-350{
	margin-top: 350px;
}

.mt-500{
	margin-top: 500px;
}

.mb-20{
	margin-bottom: 20px;
}

.mb-50{
	margin-bottom: 20px;
}

.mb-100{
	margin-bottom: 100px;
}

.mb-150{
	margin-bottom: 150px;
}

.mb-200{
	margin-bottom: 200px;
}

.p-20{
	padding: 20px;
}

.pt-100{
	padding-top: 100px; 
}

.py-50{
	padding-top: 50px;
	padding-bottom: 50px;
}

.py-80{
	padding-top: 80px;
	padding-bottom: 80px;
}

.py-100{
	padding-top: 100px;
	padding-bottom: 100px;
}

.pyvh20{
	padding-top: 20vh;
	padding-bottom: 20vh;
}




/*
* header
*/
.stick-to-top{
	position: fixed;
	top: 0;
	z-index: 1;
}

.stick-to-bottom{
	position: fixed;
	bottom: 0;
	left:0;
	padding: 0;
	width: 100%;
	z-index: 1;
}


.sticky-header{
	position: absolute;
	top: 0;
	width: 100vh;
	height: 100vh;
	z-index: 1;
}


.sticky-btn{
	position: fixed;
	top: 30px;
	right: 0px;
}



/*
* menu
*/
#menu{
	position: fixed;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	color: #000;
	overflow: scroll;
	opacity: .99;
	transition: 2s;
	z-index: 50;
}

/*
.show{
	position: fixed;
	top: 0;
	right: 0;
	width: 20%;
	min-width: 20%;
	background-color: #004039;
	color: #ffffff;
	display: block;
}


.hide{
	position: fixed;
	top: 0;
	right: 0;
	width: 20%;
	min-width: 20%;
	color: #000;
	display: none;
}
*/

/* ul{
	text-decoration: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	color: #000;

}

li{
	padding: 20px;
} */


li:hover{
	color: inherit;
	/*background-color: #474747;*/
	cursor: pointer;
}


.show-media-mobile{
	display: none;
}


.hide-media-mobile{
	display: block;
}


.hide{
	display: none;
}


.show{
	display: block;
}



/*
* checkbox
*/
.checkbox{
	height: 48px;
	width: 48px;
}


.checkmark{
	height: 2em;
	width: 2em;
	background-color: aquamarine;
}



/*
* input fields
*/
input[name="name"]{
	width: 350px;
}

input[name="mail"]{
	width: 350px;
}

input[name="street"]{
	width: 230px;
}

input[name="no"]{
	width: 120px;
}

input[name="zip"]{
	width: 120px;
}

input[name="city"]{
	width: 230px;
}




/*
* additional to-cart-btn

.add-to-cart{
	position: fixed;
	top: 150px;
	right: 10px;
	width: auto;
	height: auto;
}
*/


/*
* to-cart-btn
*
#cartBtn{
	position: fixed;
	bottom: 10px;
	margin-left: auto;
}
*/


/*
* images
*/
.itemImage{
	width: 80%;
	object-fit: scale-down;
	margin-left: auto;
	margin-right: auto;
}

.img-size-200{
	width: 200px;
	height: 200px;
	object-fit: scale-down;
}

.img-size-150{
	width: 150px;
	height: 150px;
	object-fit: scale-down;
}

.img-size-50{
	width: 50px;
	height: 50px;
	object-fit: scale-down;
}

.img-size-40{
	width: 40px;
	height: 40px;
	object-fit: scale-down;
}

.img-size-25{
	width: 25px;
	height: 25px;
	object-fit: scale-down;
}

.img-size-20{
	width: 20px;
	height: 20px;
	object-fit: scale-down;
}

.img-size-10{
	width: 10px;
	height: 10px;
	object-fit: scale-down;
}



.img-size-sent-order{
	width: 250px; 
	height: 250px;
	object-fit: scale-down;
}


.cart-img{
	width: 36px;
	height: 36px;
}




/*
footer
*/
.stick-to-bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
}




/*
* cookie-information
*/
.cookieBanner{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 5;
}




/*
* other several styles
*/
.cursor-pointer{
	cursor: pointer;
}



.toTop{
	position: fixed;
	bottom: 50px;
	right: 0px;
}



/*
* errorBanner
*/
.errorBanner{
	position: fixed;
	top: 40%;
	width: 100%;
	margin: auto 0;
	display: none;
	z-index: 100;
}




/*
* z-index
*/
.z-0{
	z-index: 0;
}

.z-1000{
	z-index: 1000;
}

.z-1050{
	z-index: 1050;
}

.z-1100{
	z-index: 1100;
}



/*
* unicodes
*/
.arrow-up:before{
	content: '\2191';
	color: #fff;
	width: 24px;
	height: 24px;
}

.arrow-down:before{
	content: '\2193';
	color: #fff;
	width: 24px;
	height: 24px;
}



/*
* width
*/
.w-100{
	width: 100%;
}

.w-90{
	width: 90%;
}

.w-80{
	width: 80%;
}

.w-75{
	width: 75%;
}

.w-70{
	width: 70%;
}

.w-60{
	width: 60%;
}

.w-50{
	width: 50%;
}

.w-50{
	width: 50%;
}

.w-30{
	width: 30%;
}

.w-20{
	width: 20%;
}



/**
z-index
*/
.zindex1000{
	z-index: 1000;
}


/** opacity*/
.opacity-90{
	opacity: 0.9;
}

.opacity-80{
	opacity: 0.8;
}

.opacity-70{
	opacity: 0.7;
}

.opacity-50{
	opacity: 0.5;
}


/*
* input-type
*/
input[type=tel]{
	width: 100%;
}