@charset "UTF-8";
/* CSS Document */

	body::after {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
		z-index: -1;
		content: url("<?= isset($_COOKIE["image"]) ? "https://promotshirt.ch/upload/" . $_COOKIE["image"] : "https://promotshirt.ch/upload/promo.png" ?>") url("<?= $product["image1"] ?>") 
		<?php
			if (!empty($product["image2"])) :
		?> url("<?= $product["image2"] ?>") 
		<?php
			endif;
			if (!empty($product["image3"])) :
		?> url("<?= $product["image3"] ?>") 
		<?php
			endif;
			if (!empty($product["image4"])) :
		?> url("<?= $product["image4"] ?>");
		<?php
			endif;
		?>
	}


.ugi-sticky-color-box, .open-button-color{
display: none;
	
}
/* third example */
.call-outs-container {
  margin: 0px auto 0 auto;
display: flex;
	width: 95%;
	background-color: white;

}

.call-out {

  margin: 5px;
  flex-basis: 30%;
	 transition: .2s linear;
	

}



.call-out:nth-child(1) {
	  order: 3;
		
	 flex: 1;
	
	height: 130vw;
	position: sticky;
	top: 75px;
	display: block;
background-color: white;
	 transition: .2s linear;

	}
.call-out:nth-child(2) {
	  order: 2;
	 flex: 1;
		width: 40%;
	
	height: 130vw;
	position: sticky;
	top: 75px;
	display: block;
	background-color: white;
	 transition: .2s linear;
	

	}
.call-out:nth-child(3) {
	
	  order: 1 ;
	 flex: 1;
width: 30%;
	background-color: white;

	}




@media (max-width: 800px) {
	
	.home-store{
display: flex;


  }
	
  .call-outs-container {
display: block;


  }
	.call-out {

  box-sizing: border-box;
  margin: 5px;
  flex-basis: 30%;
		float:left;
	
		float:left;

}
	
.call-out:nth-child(1) {
	  order:2;
		width: auto;
			position: relative;
	 flex: 2;
	background-color: red;
	height: 0vw;

	}
.call-out:nth-child(2) {
	height: auto;
	  order: 1;
	 flex: 2;
		width: auto;
	top: 0px;
	height: 290vw;
	
			position: relative;
	
	}
.call-out:nth-child(3) {
	width: auto;
			position: relative;
	  order: 3;
	 flex: 1;
	
	
	

}
	

}

.overlay {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		transition: opacity 500ms;
		visibility: hidden;
		opacity: 0;
		z-index: 65000;
	}

	.overlay:target {
		visibility: visible;
		opacity: 1;
		z-index: 65000;
	}

	.shadow {
		position: relative;
		border-radius: 20px;
	}


.carre-ugi{
		background-color: white;
			 -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
			z-index: 5;
	}

	.popup {
		margin: 70px auto;
		padding: 20px;
		background: #fff;
		border-radius: 5px;
		width: 70%;
		position: relative;
		
		z-index: 65000;
	}

	.popup h2 {
		margin-top: 0;
		color: #333;
		font-family: Tahoma, Arial, sans-serif;
	}

	.popup .close {
		position: absolute;
		top: 20px;
		right: 30px;
	
		font-size: 30px;
		font-weight: bold;
		text-decoration: none;
		color: #333;
	}

	.popup .close:hover {
		color: #06D85F;
	}

	.popup .content {
		max-height: 60%;
		overflow: auto;
	}


	.popup-box {

		margin: 0 auto;
		background: rgba(255, 255, 255, 0.2);
		padding: 5px;
		border: 2px solid #fff;
		border-radius: 20px/50px;
		background-clip: padding-box;
		text-align: center;
	}


	.logo-yuni {
		width: 100%;
		height: auto;
	}

	.logo-ugi {
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;

	}

.Titel-ugi-1-store {
	
font-family:'SF Pro Display';
font-size: 1.5vw;
font-weight: bold;
text-decoration: none;
	
}


.Ugi-Block-logo-service

{display: block;
    padding:3rem 2rem;
    background: #fff;
 
    text-align: center;

	width: 100%;
	height: 30vw;
	margin-top: 20px;
margin-bottom: 2vw;
	float: left;
	/*
	 border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);*/
}

	.ugi-thumb-block {

		display: block;
		position: relative;
		float: left;
		width: 23%;
		margin-left: 3px;
		margin-top: 10px;


	}
	.ugi-thumb-block-2 {

		display: block;
		position: relative;
		float: left;
		width: 100%;
		margin-left: 3px;
		margin-top: 10px;
	


	}

	.ugi-thumb-block:hover {

		transform: scale(1.2);
		z-index: 65000;
		box-shadow: var(--box-shadow-2);


	}

	.ugi-thumb-button-block {

		display: block;
		position: relative;
		float: left;
		width: 100%;

		background-color: white;
	}

	.ugi-thumb {
background-color: white;
		display: block;
		position: relative;
		float: left;
		width: 100%;
		margin-top: -5px;

	}


	.button-logo {
		display: inline-block;
		padding: .3vw 0.4vw;
		font-size: 0.6vw;
		border-radius: .5rem;
		border: .1rem solid gray;
		color: var(--black);
		cursor: pointer;
		background: var(--white);
		transition: all .2s linear;
		float: left;
		width: 100%;
		margin-top: 2px;
		text-align: center;
	}

	.button-logo:hover {
		background: purple;
		color: var(--white);
	}







.ugi-landing-block-1{
 /*border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);*/
	display: block;
	position: relative;
	float: left;
	padding: 0px;
	
/*	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;*/
	
}	
	





.ugi-sizes-table{
		width: 100%;
	}

.ugi-sizes-td{ 
	font-weight: bold;
	font-size: 0.8vw;
	text-align: center;

}

.ugi-sizes-td-1{ 
	font-weight: bold;
	font-size:0.8vw;

		
}

.ugi-sizes-td-2{ 
	font-size: 0.8vw;

	text-align: center;	
	
		
}



	.boxed label {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 2vw;
		height: 2vw;
		border: solid 2px #ccc;
		transition: all 0.3s;
	}

	.boxed input[type="radio"],
	.color-ugi-trans-1 input[type="radio"] {
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.boxed input[type="radio"]:checked+label {
		border: solid 3px green;
	}

	label img {
		pointer-events: none;
	}

	label {
		display: inline-block;
	}
	






.Ugi-Product-Buy-Main{
	display: block; 
	width: 100%;
	float: left;
	margin-top: 30px;


	}


	.Ugi-product-info-box {

		display: block;
		position: relative;
		width: 9vw;
		float: left;
	

	}


.sizeinfo {

		display: block;
		position: relative;

		width: 9vw;
	height: 50px;
		float: left;
		font-size: 1vw;
	font-weight: bold;

	}
.colorinfo {

		display: block;
		position: relative;

		width: 9vw;
		float: left;
		font-size: 1vw;
	font-weight: bold;

	}
	.order-logo {
		display: block;
		position: relative;
		width: 25%;
		float: left;
		margin-left:1vw;
		font-weight: bold;
		text-align: center;
		padding: 5px;
		font-size: 1.2vw;
		box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
		
	

	}

	.order-logo-titel {
		display: block;
		position: relative;
font-size: 1vw;
		font-weight: bold;
		text-align: center;
		box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
		margin-bottom: 5px;
		padding-bottom: 2px;
		
	

	}

	.pro-logo-ugi-1 {

		display: block;
		position: relative;
		float: right;
		width: 100%;
		margin-top: -5px;
		margin-bottom: -5px;
		
		padding: 5px; 
	}

	.pro-logo-ugi-1:hover{
  
			 color:var(--pink);
			cursor: pointer;

	}

	.Ugi-product-cart-box {

		display: block;
		position: relative;
margin-top: 0.5vw;
		margin-right:vw;
		width: 17vw;
		float: right;

	}

	.Ugi-product-cart-box-text {

		display: block;
		position: relative;
margin-top: 0.5vw;
		margin-right:vw;
		width: 17vw;
		float: left;

	}
	.Ugi-product-cart-box-2 {

		display: block;
		position: relative;
margin-top: 0.5vw;
		margin-right:vw;
		width: 100%;
		float: right;

	}

	.Ugi-Product-Price {
		font-family: 'SF Pro Display', sans-serif;
font-weight: 900;
		width: 8vw;
		height: auto;
		margin-top: -50px;
		margin-right: 6vw;
		float: right;
	

	}


.Ugi-Product-Price-bottom {
	font-family: 'SF Pro Display', sans-serif;
display: block;
	position: relative;
		width: 8vw;
		height: auto;
		margin-top: 0px;
		margin-right: 0vw;
	margin-bottom: 0vw;
		float: right;
	font-weight: 900;


	}



		


.ugi-preis-big-bottom {
font-family: 'Arial Black', sans-serif;
font-size: 10vw;
		float: right;	
	font-weight: 900;
		 color:var(--pink);
	width: 7vw;
	margin-left: vw;
	margin-top: vw;

	
		

}


.ugi-preis-small-bottom {
font-family: 'Arial Black', sans-serif;
font-size: 1.2vw;
float: right;	
	font-weight: 900;
		 color:var(--pink);
	width: 2vw;

	margin-top: vw;
	margin-left: -10vw;


}




.ugi-preis-currency-bottom {

	display: block;
	position: relative;
font-size: 0.8vw;
float: right;
	margin-right: 1vw;
	margin-top: -0.5vw;
font-weight: 900;
	line-height: 1;

	width: 6vw;
	text-align:right}	

	.ugi-preis-big {
font-family: 'Arial Black', sans-serif;
		font-size: 3vw;
		float: left;
		font-weight: 900;
		color: var(--pink);
		width: 4vw;
	}

	.ugi-preis-small {
	font-family: 'Arial Black', sans-serif;
		font-size: 1.2vw;
		float: left;
		font-weight: 900;
		color: var(--pink);
		width: 2vw;
		margin-left: 0vw;
		margin-top: 0.7vw;


	}
	

	.ugi-preis-currency {
		font-size: 0.6vw;
		float: left;
		margin-left: 4.5vw;
		margin-top: -1.6vw;
		font-weight: 900;
		width: 2vw;

	}



	.button-logo {
		display: inline-block;
		padding: .3vw 0.4vw;
		font-size: 0.6vw;
		border-radius: .5rem;
		border: .1rem solid gray;
		color: var(--black);
		cursor: pointer;
		background: var(--white);
		transition: all .2s linear;
		float: left;
		width: 100%;
		margin-top: 2px;
		text-align: center;
	}

	.button-logo:hover {
		background: purple;
		color: var(--white);
	}

	#quantity {
		text-align: center;
		width: 5vw;
		font-size: 1.5vw;
	}

	.btn-ugi-shop {
		display: inline-block;
		padding: .3vw 2vw;
		font-size: 1.5vw;
		border-radius: .5rem;
		border: .2rem solid var(--white);
		color: var(--white);
		cursor: pointer;
		background: var(--pink);
		transition: all .2s linear;
	}

	.btn-ugi-shop:hover {
		background: purple;
		color: var(--white);
	}


	.btn-ugi-shop-2 {
		display: inline-block;
		padding: .8vw 2vw;
		font-size: 1.5vw;
		border-radius: .5rem;
		border: .2rem solid var(--white);
		color: var(--white);
		cursor: pointer;
		background: purple;
		transition: all .2s linear;
		float: right;
		margin-top: -70px;
	}

	.btn-ugi-shop-2:hover {
		background: var(--pink);
	
		color: var(--white);
	}

	.btn-ugi-shop-3 {
		display: inline-block;
		padding: .8vw 2vw;
		font-size: 5vw;
		border-radius: .5rem;
		border: .2rem solid var(--white);
		color: var(--white);
		cursor: pointer;
		background:var(--black);
		transition: all .2s linear;
		
	}

	.btn-ugi-shop-3:hover {
		background: var(--pink);
	
		color: var(--white);
	}











	
.ugi-product-list .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.ugi-product-list .box-container .box-ugi{
    padding:3rem 2rem;
    border-radius: .5rem;
	background:  white;
    box-shadow: var(--box-shadow);
    outline:var(--outline);
    outline-offset: -1rem;
    text-align: center;
	  transition: .2s linear;
	font-size: 16px;
	width: 30rem;
	height:50rem;

	
}

.ugi-product-list .box-container .box-ugi:hover{
    outline:var(--outline-hover);
    outline-offset: 0rem;
	  transition: .2s linear;
z-index: 65000;
	transform: scale(1.5);



}

		
	.ugi_cat{
display: block;
	position: relative;
		
	
margin-bottom: 5px;
margin-left: auto;
		margin-right: auto;
	width: 50%;
	


}
		
	.ugi_cat:hover{
	filter: invert(33%) sepia(46%) saturate(5840%) hue-rotate(308deg) brightness(93%) contrast(93%);
}




.Ugi-Block-mix-match

{display: block;
    padding:3rem 2rem;
    background: #fff;

    text-align: center;
margin-bottom: 2vw;
	width: 100%;
	
margin-top: 3vw;
	float: left;
	
	

  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);
	
	
	
}

.Ugi-Block-online-katalog

{display: block;
    padding:3rem 2rem;
    background: #fff;
  
    text-align: center;
    box-shadow: var(--box-shadow);
	width: 100%;
	height: 30vw;
margin-bottom: 2vw;
	float: left;
	
	 border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);
}











@media (max-width: 800px) {
	
.ugi-sticky-color-box{
display: block;
	height: 5vw;
	
}
	
	.open-button-color{
display: block;
	height: 7vw;
		float: left;
	
}
	
		.ugi_cat{
display: block;
	position: relative;
		
	
margin-bottom: 5px;
margin-left: auto;
		margin-right: auto;
	width: 100%;
	


}
		
	.ugi_cat:hover{
	filter: invert(33%) sepia(46%) saturate(5840%) hue-rotate(308deg) brightness(93%) contrast(93%);
}
	
	
	.btn-ugi-shop-2 {
		display: inline-block;
		padding: .8vw 2vw;
		font-size: 3vw;
		border-radius: .5rem;
		border: .2rem solid var(--white);
		color: var(--white);
		cursor: pointer;
		background: purple;
		transition: all .2s linear;
		float: right;
		margin-top: -70px;
	}

	.btn-ugi-shop-2:hover {
		background: var(--pink);
	
		color: var(--white);
	}

	
.ugi-product-list .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


	.ugi-product-list .box-container .box-ugi{
    padding:3rem 2rem;
    border-radius: .5rem;
	background:  white;
    box-shadow: var(--box-shadow);
    outline:var(--outline);
    outline-offset: -1rem;
    text-align: center;
	  transition: .2s linear;
	font-size: 16px;
	width: 100%;
	height: auto;

	
}

.ugi-product-list .box-container .box-ugi:hover{
    outline:var(--outline-hover);
    outline-offset: 0rem;
	  transition: .2s linear;
z-index: 65000;
	transform: scale(1.5);



}
	.Ugi-Block-mix-match, .Ugi-Block-online-katalog{
display: none;
	
}
	
.Ugi-Block-logo-service

{display: block;
    padding:0rem 0rem;
    background: #fff;
 
    text-align: center;

	width: 100%;
	height: 50vw;
	margin-top: 20px;
margin-bottom: 2vw;
	float: left;
	/*
	 border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(15px);*/
}
	

	.Titel-ugi-1-store {
	
font-family:'SF Pro Display';
font-size: 5vw;
font-weight: bold;
text-decoration: none;
	
}
	.button-logo {
		display: inline-block;
		padding: 1.2vw 0.4vw;
		font-size: 2vw;
		border-radius: .5rem;
		border: .1rem solid gray;
		color: var(--black);
		cursor: pointer;
		background: var(--white);
		transition: all .2s linear;
		float: left;
		width: 100%;
		margin-top: 2px;
		text-align: center;
	}

	.button-logo:hover {
		background: purple;
		color: var(--white);
	}	
	
	
	
	
	
	
	


.ugi-sizes-table{
		width: 100%;
	}

.ugi-sizes-td{ 
	font-weight: bold;
	font-size: 3.5vw;
	text-align: center;

}

.ugi-sizes-td-1{ 
	font-weight: bold;
	font-size:2vw;
display: none;
		
}

.ugi-sizes-td-2{ 
	font-size: 2vw;
display: none;
	text-align: center;	
	
		
}



	.boxed label {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 6vw;
		height: 5vw;
		border: solid 2px #ccc;
		transition: all 0.3s;
	}

	.boxed input[type="radio"],
	.color-ugi-trans-1 input[type="radio"] {
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.boxed input[type="radio"]:checked+label {
		border: solid 3px green;
	}

	label img {
		pointer-events: none;
	}

	label {
		display: inline-block;
	}
		
	
	

.Ugi-Product-Buy-Main{
	display: block; 
	width: 100%;
	float: left;
	margin-top: 0px;
	margin-bottom: 10px;


	}

	
	
	
	

		
	
			.add-cart {
	
	
	}
		
		.Ugi-product-buy-box {

		display: block;
		position: relative;

		width: 100%;
			height: 30vw;
			
				float: left;

	}	

	.Ugi-product-info-box {

		display: block;
		position: relative;

		width: 37vw;
			float: left;
	

	}
		

		.Ugi-Product-Price {

	display:none;

	}


.ugi-preis-big{
	font-family:'SF Pro Display';
font-size: 10vw;
		float: left;	
	font-weight: 900;
		 color:var(--pink);
	width: 7vw;
	margin-left: 2vw;
	margin-top: 2vw;
	
		

}


.ugi-preis-small{
		font-family:'SF Pro Display';
font-size: 4vw;
float: left;	
	font-weight: bold;
		 color:var(--pink);
	width: 2vw;
	margin-left: 7vw;
	margin-top: 4vw;


}




.ugi-preis-currency{
	display: block;
	position: relative;
font-size: 2vw;
float: left;
	margin-left: 0vw;
	margin-top: 8vw;
	font-weight: bold;
	line-height: 1;
	
	width: 5vw;


}	
.Ugi-Product-Price-bottom {
display: block;
	position: relative;
		width: 28vw;
		height: auto;
		margin-top: 0px;
		margin-right: 0vw;
	margin-bottom: 0vw;
		float: right;
	


	}



		


.ugi-preis-big-bottom {
	font-family:'SF Pro Display';
font-size: 10vw;
		float: left;	
	font-weight: 900;
		 color:var(--pink);
	width: 7vw;
	margin-left: 2vw;
	margin-top: 6vw;
	
		

}


.ugi-preis-small-bottom {
		font-family:'SF Pro Display';
font-size: 4vw;
float: left;	
	font-weight: bold;
		 color:var(--pink);
	width: 2vw;
	margin-left: 7vw;
	margin-top: 4vw;


}




.ugi-preis-currency-bottom {
	display: block;
	position: relative;
font-size: 2vw;
float: left;
	margin-left: 0vw;
	margin-top: 8vw;
	font-weight: bold;
	line-height: 1;
	
	width: 5vw;


}	
	.order-logo{
font-size: 4vw;
		display: block;
		position: relative;

		width: 25vw;
		margin-left: 5vw;
			float: left;
			text-align: left;

	}
			.order-logo img{
font-size: 4vw;
		display: block;
		position: relative;

		width: 40%;

	}
	
	
		.order-logo-titel {
		display: block;
		position: relative;
font-size: 5vw;
		font-weight: bold;
		text-align: center;
		box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
		margin-bottom: 5px;
		padding-bottom: 2px;
		
	

	}
			.pro-logo-ugi-1 {

		display: block;
		position: relative;
		float: left;
		width: 100%;
		margin-top: 0px;
		margin-bottom: 0px;
				font-size: 2vw;
	}
			.Ugi-product-cart-box {
	display: block;
		position: relative;
margin-top: 1vw;
		margin-right: 0vw;
		width: 100%;
		float: right;

	}
			.sizeinfo {

		display: block;
		position: relative;
height:20px ;
		width: 37vw;
		float: left;
		font-size: 4vw;
				margin-left:0vw;
				margin-top: 2vw;

	}
		
	#quantity {
		text-align: center;
		width: 15vw;
		font-size: 8vw;
		margin-left: 5px;
		margin-right: 2px;
	}

	.btn-ugi-shop {
		display: inline-block;
		width: 80%;
		height: 10vw;
		padding: .3vw 2vw;
		font-size: 5vw;
		border-radius: .5rem;
		border: .2rem solid var(--white);
		color: var(--white);
		cursor: pointer;
		background: var(--pink);
		transition: all .2s linear;
	
	}

	.btn-ugi-shop:hover {
		background: purple;
		color: var(--white);
	}
	
	
		}