/*GRID CAPTIONS IN PAGE*/

/*SMALL GRID*/
.grid-small {
    padding: 10px 10px 1.5em 10px;
    min-width: 20%;
    margin: 0 auto;
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #ccc;
}

.grid-small li {
    display: inline-block;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    margin: 20px;
    padding: 0px;
    text-align: center;
    position: relative;
}

.grid-small figure {
    margin: 0;
    position: relative;
}

.grid-small figure a {
    text-align: center;
    color: #fff;
}

.grid-small figure img {
    max-width: 100%;
    max-height: 50px;
    display: block;
    position: relative;
}


/*LARGE GRID*/
.grid-large {
    padding: 10px 10px 10px 10px;
    min-width: 20%;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

.grid-large li {
    display: inline-block;
    min-width: 200px;
    max-width: 200px;
    min-height: 200px;
    margin: 0 5px;
    padding: 20px;
    text-align: left;
    position: relative;
}

.grid-large figure {
    margin: 0;
    position: relative;
}

.grid-large figure a {
    text-align: center;
    color: #fff;
}

.grid-large figure img {
    max-width: 100%;
    max-height: 200px;
    display: block;
    position: relative;
}

.grid-large figcaption {
    min-width: 100%;
    position: absolute;
    padding: 2px;
    background: #2c3f52;
    color: #ed4e6e;
}

.grid-large figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
}


/*When Viewport is between >= 280px && <= 840px*/
@media screen and (min-width: 280px) and (max-width: 840px) {
    .grid-small {
	padding: 5px 5px 1.5em 5px;
	max-width: 80%;
    }
    .grid-small li {
	width: 100%;
	min-width: 50px;
	margin: 10px;
	padding: 0px;
    }
    .grid-large {
	display: none;
    }
}

/*When Viewport is between >= 841px && <= 1024px*/
@media screen and (min-width: 841px) and (max-width: 1024px) {
    .grid-small {
	display: none;
    }
    .grid-small li{
	display: none;
    }
    .grid-large {
	padding: 10px 10px 10px 10px;
	max-width: 80%;
    }
    .grid-large li {
	width: 100%;
	min-width: 200px;
    }

}

/*When Viewport is between > 1024px && <= 1366px*/
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .grid-small {
	display: none;
    }
    .grid-small li{
	display: none;
    }
    .grid-large {
	padding: 10px 10px 10px 10px;
	max-width: 1024px;
    }
    .grid-large li {
	width: 100%;
	min-width: 200px;
    }
}

/*When Viewport reaches 1920px*/
@media screen and (min-width: 1367px) and (max-width: 1920px) {
    .grid-small {
	display: none;
    }
    .grid-small li{
	display: none;
    }
    .grid-large {
	padding: 10px 10px 10px 10px;
	max-width: 1366px;
    }
    .grid-large li {
	width: 100%;
	min-width: 200px;
    }
}

/*When Viewport reaches > 1920px*/
@media screen and (min-width: 1921px) {
    .grid-small {
	display: none;
    }
    .grid-small li{
	display: none;
    }
    .grid-large {
	padding: 10px 10px 10px 10px;
	max-width: 1600px;
    }
    .grid-large li {
	width: 100%;
	min-width: 200px;
    }
}
/*GRID CAPTIONS IN PAGE*/