:root {
	--shadow: rgba(0, 0, 0, 0.3)
}
@media screen and (min-width: 600px) {
	
	/* width */
::-webkit-scrollbar {
  width: 25px;
	
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px lightgrey; 
  border-radius: 10px;

}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
	border-color: black;
	border-width: 1px;
  box-shadow: inset 0 0 5px lightgrey; 
	

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #F1F1F1; 
	
}
	
	.finger-slide	{
		text-align: center;
		margin: 0px;
		padding:0px;

		margin-bottom:-15px;
		padding-top:10px;
		
		
	}
	
	body {
		background-color: white;
	}
	* {
		box-sizing: border-box;
		padding: 0px;
		margin: 0px;
		
	}
	html, body {
		height: 100%;
		width: 100%;
		overflow: hidden;
		
	}
	h2 {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 1.0em;
		font-style: normal;
		padding-bottom: 10px;
		padding-left: 10px;
		user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	p {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 0.9em;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		font-style:normal;
		font-weight: 400;
		line-height: 1.3em;
		user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		text-align: left;
	}
	h3 {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 0.9em;
		font-weight: 400;
		line-height: 1.3em;
		padding-bottom: 10px;
		padding-left: 10px;
		user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	hr {
		margin-top:20px;
		margin-bottom: 20px;
	}
	.slider-container {
		height: 100vh;
		display: inline-flex;
		scrollbar-width: 10px;
		transform: translateX(0);
		will-change: transform;
		transition: transform 0.3s ease-out;
		cursor: grab;
	}
	.slide{
		max-height: 100vh;
		width: 100vw;
		display: flex;
		overflow-x:hidden;
		justify-content: center;
		padding: 1em;
		padding-top:1em;
	}
	

	
	
	
	img {
		user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	
	
	
	
	

	
	
	/* Clear floats after the columns */

	.row {
		display: table;
  width: 100%;
		
		
	}
	.column {
		float: left;
		width:48%;
		padding: 18px;
		height: auto;
		/* Should be removed. Only for demonstration */
		margin-left:0em;
		border-radius: 12px;
		max-width: 400px;
		display: table-cell;
		margin-left: 1%;
        margin-right: 1%;
	
	}
	.slide img{
		max-width: 100%;
		max-height: 100%;
		transition: transform 0.3s ease-in-out;
		box-shadow: 3px 3px 30px -1px var(--shadow);
		border-radius: 4px;
		user-select: none;
	}
	.grabbing {
		cursor: grabbing;
	}
	.grabbing .slide img{
		transform: scale(0.9);
		box-shadow: 3px 3px 30px -1px var(--shadow);
	}
}






@media screen and (max-width: 600px) {
	/* width */
::-webkit-scrollbar {
  width: 25px;
	
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px lightgrey; 
  border-radius: 10px;

}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
  box-shadow: inset 0 0 2px lightgrey; 
	

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #F1F1F1; 
	
}
	
	
	.finger-slide	{
		text-align: center;
		margin: 0px;
		padding:0px;
		
		margin-bottom:-27px;
		padding-top:10px;
		
		
	}
		.first-content	{
		text-align: center;
		margin: 0px;
		padding:0px;
		padding-right:25px;
		margin-bottom:-27px;
		padding-top:10px;
		
		
	}
	body {
		background-color: white;
	}
	
	* {
	
		box-sizing: border-box;
		padding: 0px;
		margin: 0px;
	}
	html, body {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	h2 {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 1.0em;
		font-style: normal;
		padding-bottom: 10px;
		padding-left: 10px;
	}
	p {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 0.9em;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		font-style:normal;
		font-weight: 400;
		line-height: 1.3em;
		text-align: left;
	}
	h3 {
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 0.9em;
		font-weight: 400;
		line-height: 1.3em;
		padding-bottom: 10px;
		padding-left: 10px;
	}
	hr {
		margin-top:20px;
		margin-bottom: 20px;
	}
	.slider-container {
		height: 100vh;
		display: inline-flex;
		scrollbar-width: none;
		transform: translateX(0);
		will-change: transform;
		transition: transform 0.3s ease-out;
		cursor: grab;
		padding-top:30px;
		
	}
	.slide{
		max-height: 100vh;
		width: 100vw;
		display: flex;
		
		overflow-x:hidden;
		justify-content: center;
		padding: 0em;
		padding-top:0em;
		
		scrollbar-width: thick;
		
	}

	
	.row {
		display: table;
		width: 100%;
	}
	
	
	.column {
		float: left;
		width: 100%;
		padding: 20px;
		padding-top:10px;
		height: auto;
		/* Should be removed. Only for demonstration */
		margin: 10px;
		border-radius: 12px;
	    display: table-cell;
	}

	
	
	.slide img{
		max-width: 100%;
		max-height: 100%;
		transition: transform 0.3s ease-in-out;
		box-shadow: 3px 3px 30px -1px var(--shadow);
		border-radius: 4px;
		user-select: none;
	}
	.grabbing {
		cursor: grabbing;
	}
	.grabbing .slide img{
		transform: scale(0.9);
		box-shadow: 3px 3px 30px -1px var(--shadow);
	}
}