@media screen and (max-width: 700px) {

  .img3thumb {
    width:55px;
  }

#photos_container {
   clear: both;
   width: 682px;
   margin-left: auto;
   margin-right: auto;
}

.slider{
        position: absolute;
	float: left;
        width: 202px;
}

.slider>img{
        position: absolute;
	left: 202px;
        width: 480px;
	transition: all 0.5s;
}

}


@media screen and (min-width: 700px) {

  .img3thumb {
    width:80px;
  }

#photos_container {
   clear: both;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.slider{
        position: absolute;
	float: left;
        width: 300px;
}

.slider>img{
        position: absolute;
	left: 300px;
        width: 500px;
	transition: all 0.5s;
}

}






.slider input[name='slide_switch'] {
	display: none;
}

/* display the thumnail image */

.slider label {
	margin: 0px 7px 7px 0;
	border: 3px solid #999;
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	opacity: 0.6;
}

.slider label img{
	display: block;
}

/* click effects */

.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}

/*Clicking any thumbnail now should change its opacity(style)*/

.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}

.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}