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



.swap_button_wrapper {			position: relative; 
								background-image: url("pictures/background/meincafe_background_hoch_swap.jpg");
								background-position: top center;
								background-size: 100%;
								background-repeat: no-repeat;
								padding-top: 100px; padding-bottom: 50px;}

#swap_wrapper	{				overflow-y: hidden; 
								scroll-snap-type: x mandatory;
								scrollbar-width: none; 
								scroll-behavior: smooth;
								position: relative;
								width: 100%;
								}

#swap_wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

#swap			{				width: 100%; 
								display: flex; 
								width: calc(340px*8); 
								display: flex; 
								justify-content: flex-start;
								padding-left: 20px;
								}


.swap_content	{				width: 340px; 
								height: 650px; 
								padding: 20px 20px 20px 20px; 
								scroll-snap-align: center;} 

.swap_picture_frame { 			height: 400px; 
								width: 100%; 
								border-radius: 10px; 
								background-repeat: no-repeat; 
								background-size: cover;
								box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4);}

.swap_picture_frame_color {		height: 400px; 
								border-radius: 10px; 
								width: 100%;
								background: var(--rgb_01);
								background: -webkit-linear-gradient(bottom, var(--rgb_00) 0%, var(--rgb_00) 100% );
								background: -o-linear-gradient(bottom, var(--rgb_00) 0%, var(--rgb_00) 100% );
								background: linear-gradient(to top, var(--rgb_00) 0%, var(--rgb_00) 100% );
							
						}

.swap_picture_frame_01 {		background-image: url("pictures/swap/01.jpg"); }
.swap_picture_frame_02 {		background-image: url("pictures/swap/10.jpg"); }
.swap_picture_frame_03 {		background-image: url("pictures/swap/03.jpg"); }
.swap_picture_frame_04 {		background-image: url("pictures/swap/04.jpg"); }
.swap_picture_frame_05 {		background-image: url("pictures/swap/13.jpg"); }
.swap_picture_frame_06 {		background-image: url("pictures/swap/06.jpg"); }
.swap_picture_frame_07 {		background-image: url("pictures/swap/07.jpg"); }
.swap_picture_frame_08 {		background-image: url("pictures/swap/08.jpg"); }
.swap_picture_frame_09 {		background-image: url("pictures/swap/09.jpg"); }
.swap_picture_frame_11 {		background-image: url("pictures/swap/11.jpg"); }
.swap_picture_frame_12 {		background-image: url("pictures/swap/12.jpg"); }

.swap_h { 						width: 100%; padding: 50px 10px 0 10px; text-align: center;}
.swap_text {					width: 100%; padding: 0px 10px 0 10px; text-align: center;}

#button_left {width: 60px; height: 60px;  position: absolute; top: 290px; left:10px; z-index: 100; display: flex; justify-content: center; align-items: center; }
#button_right {width: 60px; height: 60px;  position: absolute; top: 290px; right:10px; z-index: 100; display: flex; justify-content: center; align-items: center; }

@media (min-width: 750px)

{

#button_left {top: 310px;  }
#button_right {top: 310px; }
	
.swap_button_wrapper {			position: relative; padding-top: 120px; padding-bottom: 80px;
								background-image: url("pictures/background/meincafe_background_quer_swap.jpg");
								background-position: top center;
								background-size: 100%;
								background-repeat: no-repeat;}
	
}

@media (min-width: 950px)
	
{
#swap			{				width: 100%; 
								display: flex; 
								width: calc(360px*8); 
								display: flex; 
								justify-content: flex-start;
								padding-left: 50px;
								}	
	
.swap_content	{				width: 360px; 
								height: 650px; 
								padding: 20px 30px 20px 30px; 
								scroll-snap-align: center;} 
	
}