/**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */
@media screen{
.image-slider {
	position:relative;
	display:block;
	line-height: 0;
	margin:0 auto 20px;
	max-width:800px;
	width:90%;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 50%;
	max-width: 100%;
	overflow: hidden;
	resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
	content: '';
	position: absolute;
	right: 0; bottom: 0;
	width: 13px; height: 13px;
	padding: 5px;
	background: linear-gradient(-45deg, white 50%, transparent 0);
	background-clip: content-box;
	cursor: ew-resize;
	-webkit-filter: drop-shadow(0 0 2px black);
	filter: drop-shadow(0 0 2px black);
}

.image-slider img {
	user-select: none;
	max-width: 800px;
}

.firstsliderimg{width:100%}
.secondsliderimg{height:100%;}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2){
  .image-slider {width:95%; display:none;}
  
  }