body {
	margin: 0.5rem;
}
.container, .container2 {
	background-color: #fff;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(10, 10%);
	grid-template-rows: repeat(6, 130px);
}
.pic {
	background-repeat: none;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	margin: 0.5rem;
}
.pic a {
	font: normal 300 24px/0px 'Open Sans', sans-serif;
	color: #ffffff !important; 
	text-decoration: none;
	display: block;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: absolute;
	text-align: center;
}
.pic a span {
	display: block;
	position: absolute;
	transition: 0.5s;
	bottom: -50px;
	width: 100%;
}
.pic:hover a span {
	line-height: 60px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.8);
}


.pic-1 { grid-column: 1 / span 3; grid-row: 1 / span 4; }
.pic-1 { background-image: url(images/home/gallery/external/bifold_doors_devon.jpg); }

.pic-2 { grid-column: 4 / span 2; grid-row: 1 / span 4; }
.pic-2 { background-image: url(images/home/gallery/external/bifold_doors-devon.jpg); }

.pic-3 { grid-column: 6 / span 3; grid-row: 1 / span 2; }
.pic-3 { background-image: url(images/home/gallery/external/bifold-door_devon.jpg); }

.pic-4 { grid-column: 6 / span 3; grid-row: 3 / span 2; }
.pic-4 { background-image: url(images/home/gallery/external/more/bifold_doors_devon.jpg); }

.pic-5 { grid-column: 9 / span 2; grid-row: 1 / span 3; }
.pic-5 { background-image: url(images/home/gallery/external/bifold-doors-devon.jpg); }

.pic-6 { grid-column: 9 / span 2; grid-row: 4 / span 3; }
.pic-6 { background-image: url(images/home/gallery/external/bifold-doors_devon.jpg); }

.pic-7 { grid-column: 1 / span 2; grid-row: 5 / span 2; }
.pic-7 { background-image: url(images/home/gallery/external/more/bifold_doors-devon.jpg); }

.pic-8 { grid-column: 3 / span 2; grid-row: 5 / span 2; }
.pic-8 { background-image: url(images/home/gallery/external/more/bifold-doors_devon.jpg); }

.pic-9 { grid-column: 5 / span 4; grid-row: 5 / span 2; }
.pic-9 { background-image: url(images/home/gallery/external/more/bifold-doors-devon.jpg); }


.pic-10 { grid-column: 1 / span 3; grid-row: 1 / span 4; }
.pic-10 { background-image: url(images/home/gallery/internal/bifold-doors-devon.jpg); }

.pic-11 { grid-column: 1 / span 3; grid-row: 5 / span 2; }
.pic-11 { background-image: url(images/home/gallery/internal/bifold_doors_devon.jpg); }

.pic-12 { grid-column: 4 / span 2; grid-row: 1 / span 3; }
.pic-12 { background-image: url(images/home/gallery/internal/bifold_doors-devon.jpg); }

.pic-13 { grid-column: 4 / span 2; grid-row: 4 / span 3; }
.pic-13 { background-image: url(images/home/gallery/internal/bifold-door-devon.jpg); }

.pic-14 { grid-column: 6 / span 3; grid-row: 1 / span 2; }
.pic-14 { background-image: url(images/home/gallery/internal/bifold-doors_devon.jpg); }

.pic-15 { grid-column: 6 / span 3; grid-row: 3 / span 4; }
.pic-15 { background-image: url(images/home/gallery/internal/more/bifold-doors-devon.jpg); }

.pic-16 { grid-column: 9 / span 2; grid-row: 1 / span 2; }
.pic-16 { background-image: url(images/home/gallery/internal/more/bifold_doors_devon.jpg); }
.pic-17 { grid-column: 9 / span 2; grid-row: 3 / span 2; }

.pic-17 { background-image: url(images/home/gallery/internal/more/bifold-doors_devon.jpg); }

.pic-18 { grid-column: 9 / span 2; grid-row: 5 / span 2; }
.pic-18 { background-image: url(images/home/gallery/internal/more/bifold-door-devon.jpg); }







.pic-19 { grid-column: 1 / span 3; grid-row: 1 / span 4; }
.pic-19 { background-image: url(images/stormforce/gallery/sliding_doors_devon.jpg); }

.pic-20 { grid-column: 1 / span 3; grid-row: 5 / span 2; }
.pic-20 { background-image: url(images/stormforce/gallery/sliding_doors-devon.jpg); }

.pic-21 { grid-column: 4 / span 2; grid-row: 1 / span 3; }
.pic-21 { background-image: url(images/stormforce/gallery/sliding-doors_devon.jpg); }

.pic-22 { grid-column: 4 / span 2; grid-row: 4 / span 3; }
.pic-22 { background-image: url(images/stormforce/gallery/sliding-doors_devon.png); }

.pic-23 { grid-column: 6 / span 3; grid-row: 1 / span 2; }
.pic-23 { background-image: url(images/stormforce/gallery/more/slidin_doors_devon.jpg); }

.pic-24 { grid-column: 6 / span 3; grid-row: 3 / span 4; }
.pic-24 { background-image: url(images/stormforce/gallery/sliding-doors-devon.jpg); }

.pic-25 { grid-column: 9 / span 2; grid-row: 1 / span 2; }
.pic-25 { background-image: url(images/stormforce/gallery/more/sliding_doors-devon.jpg); }

.pic-26 { grid-column: 9 / span 2; grid-row: 3 / span 2; }
.pic-26 { background-image: url(images/stormforce/gallery/more/sliding-doors_devon.jpg); }

.pic-27 { grid-column: 9 / span 2; grid-row: 5 / span 2; }
.pic-27 { background-image: url(images/stormforce/gallery/more/sliding-doors-devon.jpg); }




.pic-28 { grid-column: 1 / span 3; grid-row: 1 / span 4; }
.pic-28 { background-image: url(images/stormforce/internorm/sliding-doors_devon.png); }

.pic-29 { grid-column: 1 / span 3; grid-row: 5 / span 2; }
.pic-29 { background-image: url(images/stormforce/internorm/sliding_doors-devon.jpg); }

.pic-30 { grid-column: 4 / span 2; grid-row: 1 / span 3; }
.pic-30 { background-image: url(images/stormforce/internorm/sliding-doors_devon.jpg); }

.pic-31 { grid-column: 4 / span 2; grid-row: 4 / span 3; }
.pic-31 { background-image: url(images/stormforce/internorm/more/sliding_doors-devon.jpg); }

.pic-32 { grid-column: 6 / span 3; grid-row: 1 / span 2; }
.pic-32 { background-image: url(images/stormforce/internorm/sliding-doors-devon.jpg); }

.pic-33 { grid-column: 6 / span 3; grid-row: 3 / span 4; }
.pic-33 { background-image: url(images/stormforce/internorm/more/sliding_doors_devon.jpg); }

.pic-34 { grid-column: 9 / span 2; grid-row: 1 / span 2; }
.pic-34 { background-image: url(images/stormforce/internorm/sliding_doors_devon.jpg); }

.pic-35 { grid-column: 9 / span 2; grid-row: 3 / span 2; }
.pic-35 { background-image: url(images/stormforce/internorm/more/sliding-doors_devon.jpg); }

.pic-36 { grid-column: 9 / span 2; grid-row: 5 / span 2; }
.pic-36 { background-image: url(images/stormforce/internorm/more/sliding-doors-devon.jpg); }




.pic-37 { grid-column: 1 / span 3; grid-row: 1 / span 4; }
.pic-37 { background-image: url(images/alpine-range/gallery/sliding-doors_devon.jpg); }

.pic-38 { grid-column: 1 / span 3; grid-row: 5 / span 2; }
.pic-38 { background-image: url(images/alpine-range/gallery/sliding-doors-devon.jpg); }

.pic-39 { grid-column: 4 / span 2; grid-row: 1 / span 3; }
.pic-39 { background-image: url(images/alpine-range/gallery/sliding-door_devon.jpg); }

.pic-40 { grid-column: 4 / span 2; grid-row: 4 / span 3; }
.pic-40 { background-image: url(images/alpine-range/gallery/more/sliding_doors-devon.jpg); }

.pic-41 { grid-column: 6 / span 3; grid-row: 1 / span 2; }
.pic-41 { background-image: url(images/alpine-range/gallery/sliding_doors_devon.jpg); }

.pic-42 { grid-column: 6 / span 3; grid-row: 3 / span 4; }
.pic-42 { background-image: url(images/alpine-range/gallery/sliding_door-devon.jpg); }

.pic-43 { grid-column: 9 / span 2; grid-row: 1 / span 2; }
.pic-43 { background-image: url(images/alpine-range/gallery/more/sliding_doors_devon.jpg); }

.pic-44 { grid-column: 9 / span 2; grid-row: 3 / span 2; }
.pic-44 { background-image: url(images/alpine-range/gallery/more/sliding-doors_devon.jpg); }

.pic-45 { grid-column: 9 / span 2; grid-row: 5 / span 2; }
.pic-45 { background-image: url(images/alpine-range/gallery/more/sliding-doors-devon.jpg); }




@media (max-width: 1200px) {
	.container { grid-template-columns: repeat(6, 16.666%) !important; grid-template-rows: repeat(7, 120px) !important; }
	.container2 { grid-template-columns: repeat(6, 16.666%) !important; grid-template-rows: repeat(7, 120px) !important; }
	.pic-1 { grid-column: 1 / span 2 !important; grid-row: 1 / span 4 !important; }
	.pic-2 { grid-column: 3 / span 2 !important; grid-row: 1 / span 4 !important; }
	.pic-3 { grid-column: 5 / span 3 !important; grid-row: 1 / span 2 !important; }
	.pic-4 { grid-column: 5 / span 3 !important; grid-row: 3 / span 2 !important; }
	.pic-5 { grid-column: 1 / span 3 !important; grid-row: 5 / span 3 !important; }
	.pic-6 { grid-column: 4 / span 3 !important; grid-row: 5 / span 3 !important; }
	.pic-7 { display: none !important; }
	.pic-8 { display: none !important; }
	.pic-9 { display: none !important; }
	
	.pic-10 { grid-column: 1 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic-11 { grid-column: 3 / span 4 !important; grid-row: 1 / span 2 !important; }
	.pic-12 { grid-column: 1 / span 4 !important; grid-row: 3 / span 3 !important; }
	.pic-13 { grid-column: 5 / span 2 !important; grid-row: 3 / span 3 !important; }
	.pic-14 { grid-column: 1 / span 2 !important; grid-row: 6 / span 2 !important; }
	.pic-15 { grid-column: 3 / span 2 !important; grid-row: 6 / span 2 !important; }
	.pic-16 { grid-column: 5 / span 2 !important; grid-row: 6 / span 2 !important; }
	.pic-17 { display: none !important; }
	.pic-18 { display: none !important; }	

	.pic-19 { grid-column: 1 / span 2 !important; grid-row: 1 / span 4 !important; }
	.pic-20 { grid-column: 3 / span 2 !important; grid-row: 1 / span 4 !important; }
	.pic-21 { grid-column: 5 / span 3 !important; grid-row: 1 / span 2 !important; }
	.pic-22 { grid-column: 5 / span 3 !important; grid-row: 3 / span 2 !important; }
	.pic-23 { grid-column: 1 / span 3 !important; grid-row: 5 / span 3 !important; }
	.pic-24 { grid-column: 4 / span 3 !important; grid-row: 5 / span 3 !important; }
	.pic-25 { display: none !important; }
	.pic-26 { display: none !important; }
	.pic-27 { display: none !important; }

    .pic-28 { grid-column: 1 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic-29 { grid-column: 3 / span 4 !important; grid-row: 1 / span 2 !important; }
	.pic-30 { grid-column: 1 / span 4 !important; grid-row: 3 / span 3 !important; }
	.pic-31 { grid-column: 5 / span 2 !important; grid-row: 3 / span 3 !important; }
	.pic-32 { grid-column: 1 / span 2 !important; grid-row: 6 / span 2 !important; }
	.pic-33 { grid-column: 3 / span 2 !important; grid-row: 6 / span 2 !important; }
	.pic-34 { grid-column: 5 / span 2 !important; grid-row: 6 / span 2 !important; }
	.pic-35 { display: none !important; }
	.pic-36 { display: none !important; }


	
}
@media (max-width: 850px) {
	.container { grid-template-columns: repeat(6, 16.666%) !important; grid-template-rows: repeat(6, 120px) !important; }
	.container2 { grid-template-columns: repeat(6, 16.666%) !important; grid-template-rows: repeat(6, 120px) !important; }
	.pic-1 { grid-column: 1 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic-2 { grid-column: 1 / span 2 !important; grid-row: 5 / span 2 !important; }
	.pic-3 { grid-column: 5 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic-4 { grid-column: 5 / span 2 !important; grid-row: 5 / span 2 !important; }
	.pic-5 { grid-column: 3 / span 2 !important; grid-row: 3 / span 2 !important; }
	.pic-6 { grid-column: 3 / span 2 !important; grid-row: 5 / span 2 !important; }
	.pic-7 { grid-column: 3 / span 2 !important; grid-row: 1 / span 2 !important; display: block !important; }
	.pic-8 { grid-column: 5 / span 2 !important; grid-row: 3 / span 2 !important; display: block !important; }
	.pic-9 { grid-column: 1 / span 2 !important; grid-row: 3 / span 2 !important; display: block !important; }
}
@media (max-width: 450px) {
	.container { grid-template-columns: repeat(4, 25%) !important; grid-template-rows: repeat(6, 80px) !important; }
	.container2 { grid-template-columns: repeat(4, 25%) !important; grid-template-rows: repeat(7, 80px) !important; }
	.pic-1 { grid-column: 1 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic-2 { grid-column: 3 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic-3 { grid-column: 1 / span 2 !important; grid-row: 3 / span 2 !important; }
	.pic-4 { grid-column: 3 / span 2 !important; grid-row: 3 / span 2 !important; }
	.pic-5 { grid-column: 1 / span 2 !important; grid-row: 5 / span 2 !important; }
	.pic-6 { grid-column: 3 / span 2 !important; grid-row: 5 / span 2 !important; }
	.pic-7 { display: none !important; }
	.pic-8 { display: none !important; }
	.pic-9 { display: none !important; }
	.pic-11 { grid-column: 3 / span 2 !important; grid-row: 1 / span 2 !important; }
	.pic a { font: normal 300 18px/18px 'Open Sans', sans-serif !important; }
	.pic a span { bottom: 0 !important; background-color: rgba(0,0,0,0.8) !important; padding: 10px 15px !important; display: inline-block !important; width: auto !important; left: 0; }
	.pic:hover a span { line-height: 18px !important; }
}