@charset "UTF-8";
/* CSS Document */



#blog-container { margin-bottom: -1px; }

#blog-container .square {
    float:left;
    position: relative;
    width: 33.333%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    background-color:#1E1E1E;
    overflow:hidden;
	filter:grayscale(0.8);
}

#blog-container .square:hover { filteR:grayscale(0); transition: all .2s ease-in-out; }

#blog-container .content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
	background: rgba(0,0,0,0.6);
	filter:grayscale(0%) !important;
    transition: all .2s ease-in-out;
}

#blog-container .content:hover { 

	background: rgba(0,0,0,0.5);

}

#blog-container .content a { text-align: left; font-size: 25px; }

#blog-container .table{
    display:table;
    width:100%;
    height:100%;
}
#blog-container .table-cell{
    display:table-cell;
    vertical-align:bottom;
}
#blog-container .square h1 { font-weight: 400; text-align: left; position: relative; bottom: 40px;  text-transform: uppercase; font-size: 25px; }
#blog-container .square h2 { font-weight: 400; color: #ccc; text-align: left; position: relative; bottom: 40px; }

/*  For list */
#blog-container ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
#blog-container li{
    margin: 0 0 0 5%;
    padding:0;
}


/*  For responsive images */

#blog-container .content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}
/*  For responsive images as background */

#blog-container .bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    color:#fff;
}


#blog-container p{
    margin:0;
    padding:0;
    text-align:left;
}

#blog-container .numbers{
    font-weight:900;
    font-size:100px;
}

#blog-container #bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#blog-container #bottom p{
    text-align:center;
    line-height:2em;
}
#blog-container #bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#blog-container #bottom a:hover{
    background:#ECECEC;
    border:1px solid #fff;
}

@media screen and (max-width: 900px) {
	
	#blog-container .square { 
	
		width: 100%; padding-bottom: 30%; height: 280px; float: none !important;
	
	}
	
	#blog-container .square h1 { font-size: 25px; width: 80%; margin-bottom: 0px !important; text-transform: uppercase; }
	#blog-container .content { width: 99%; height: 100%; }
	#blog-container .square .readmore { display: none; }
	
}