@charset "utf-8";

/* ---------------------------------- */
.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 40px;
}
/* ------------------------------------------------------ */
.imgcontainer {
	position: relative;
}

.imgcontainer .imgc_content {
	position: absolute; /* Position the background text */
	/* bottom: 0; */ /* At the bottom. Use top:0 to append it to the top */
	top: 10px; /* 10px !!!!!! adjust !!*/
	color: #F7F7F7;
	box-sizing: inherit;
	width: 100%;
	padding: 5px;
	/* border-radius: 0% 0% 5% 5%; */
	background-color: rgba(33,186,254,0.5);
}

.content_title {
	text-align: center;
	color: #567FAC;
	font-size: 1em;
	margin: 0px;
}

.content_tech {
	text-align: center;
	color: #38537A;
	font-size: 0.75em;
	margin: 0px;	
}

/* ------------------------------------------------------ */
.img-top-container-flex{
    display:inline-block;
	display: -ms-flexbox;/*  IE10 */
    -ms-flex-wrap: wrap;  /*IE10 */
/*
	flex-direction: row | row-reverse | column | column-reverse
	flex-wrap: nowrap | wrap | wrap-reverse
	flex-flow: row wrap; The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
	justify-content: flex-start | flex-end | center | space-between | space-around
	align-items: flex-start | flex-end | center | baseline | stretch
	align-content: flex-start | flex-end | center | space-between | space-around | stretch
*/	
	
	display:flex;
	flex-wrap: wrap;
	align-centent: center;
	justify-content:space-around; /*flex-start | flex-end | center | space-between | space-around*/
	
}

.img-container {
	display: inline-block; /*inline-block;inline-flex*/
	/*justify-content: center */ /*flex-start | flex-end | center | space-between | space-around*/
	text-align: center;	
	width: 20%;
	
	box-shadow: 1px 1px 2px 1px #777;
	border-width: 1px;
	border-color: #CCC;
	border-style: solid;
	margin: 20px 20px 20px 20px;
	padding: 10px 10px 0px 10px;
	border-radius: 5px;
}

@media only screen and (max-width:993px){
	.img-container {width: 40%;}
}
@media only screen and (max-width:768px){
	.img-container {width: 100%;}
}
/*
@media only screen and (max-width:600px){
	.img-container {width: 100%;}
}
*/
/*
@media only screen and (max-width:1800px){#media_q:after {content: "6";}}
@media only screen and (max-width:1600px){#media_q:after {content: "5";}}
@media only screen and (max-width:1200px){#media_q:after {content: "4";}}
@media only screen and (max-width:993px){#media_q:after {content: "3";}}
@media only screen and (max-width:768px){#media_q:after {content: "2";}}
@media only screen and (max-width:600px){#media_q:after {content: "1";}}

*/.img-container img {
	/*height: auto;*/
	height: auto;
	width: auto;
	vertical-align: middle;
	max-width: 95%;
	max-height: 75%;
	box-shadow: 1px 1px 2px 1px #777;
	border-width: 1px;
	border-color: #CCC;
	border-style: solid;
	/* display: table-row; */
	/*z-index: 10;*/
	margin-top:10px;
	margin-bottom:10px;
	margin-left: auto;
	margin-right:auto;
	position:relative;
	bottom: 0px;
}
.img-container p {
	font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.img-container p + p {
	font-size: 0.8em;
}
.img-container img:hover {
	opacity: 0.95;
	box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.25);
	position: relative;
	/* margin-top: 16px; */
	top: -5px;
	left: -2px;
}