/** General page styling **/
html {
  background-color: #e5e5e5;
  font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
}

#main {

  position: relative;
}

header h1 {
  text-align: center;
  font-size: 30px;
  font-weight: 200;
  margin: 30px 0 10px 0;
}

header p {
  text-align: center;
  font-size: 14px;
  color: #666666;
  margin: 0;
  font-weight: 200;
}

/**
 * Grid container
 */
#tiles {
  list-style-type: none;
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 0;
  padding: 0;
 overflow: hidden;
 max-height: 800px;
}

/**
 * Grid items
 */
#tiles li {
  width: 200px;
  background-color: #11182B;
/*  border: 1px solid #dedede;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
*/
  display: none; /** Hide items initially to avoid a flicker effect **/
  cursor: pointer;
  padding: 0px;
}

#tiles li.inactive {
  visibility: hidden;
  opacity: 0;
}

#tiles li img {
  display: block;
}

.social-wall-title {
	text-align: center; 
	color: #FFFFFF;
}

.social-wall-details {
	padding: 10px 10px;
	background: #004F9F;
	color: #FFFFFF;
	line-height: 1.1em;
}

.social-wall-type {
	padding: 7px 10px;
	color: #001933;
	background: #00D5FF;
}

.social-wall-type::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 25px solid #001933;
    border-left: 25px solid #00D5FF;
    width: 0;
}

.social-wall-view-more {
    display: block;
    margin-top: -40px;
    position: relative;
	line-height: 40px;
	text-align: center;
	color: #FFFFFF !important;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
    background: rgba(0,25,51,0.7);
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,25,51,0.7), rgba(0,25,51,1)); 
}


/**
 * Grid item text
 */
#tiles li p {
  color: #FFFFFF;
  font-size: 13px;
  text-align: left;
  font-weight: 200;
  margin: 5px 0 5px 0px;
  word-break: break-word;
}

footer {
  text-align: center;

}

footer a {
  color: #435DC5;
  text-decoration: none;
}

/**
 * Progress bar for imagesLoaded
 */
.progress-bar {
  background-color: #0BC20B;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
  -webkit-transition: width 0.3s ease-out;
  -moz-transition: width 0.3s ease-out;
  -o-transition: width 0.3s ease-out;
  transition: width 0.3s ease-out;
}

/**
 * Placerholder css
 */
.wookmark-placeholder {
/*
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
*/
  background-color: #004F9F;
  border: 1px solid #004F9F;
  z-index: -1;
}

/**
 * Grid item text
 */
.caption {
  padding: 5px;
}

/* unvisited link */
a:link {
  color: #666;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #666;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #666;
  text-decoration: none;
}

/* selected link */
a:active {
  color:  #666;
  text-decoration: none;
}

/**
 * Social network css
 */
.fa-facebook-f:before, .fa-facebook:before {
  content: "\f09a";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-twitter:before {
  content: "\f099";
}
.fa {
	font-size: 20px;
}

/*
.fa {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0,0);
}
*/

.post-network {
  position:absolute;
  top:5px;
  right:-7px;
  text-align:center;
  color:#fff;
  height:22px;
  width:24px;
  font-size:18px;
  padding:5px;
}

.post-network[data-network=facebook] {
  background: #3b5998;
}

.post-network[data-network=twitter] {
  background: #00aced;
}

.post-network[data-network=instagram] {
  background: #517fa4;
}

.post-network-ribbon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 7px 0 0;
  border-color: transparent;
  position: absolute;
  bottom: -8px;
  right: 0;
}

.post-network[data-network=instagram] .post-network-ribbon {
  border-top-color: #406582;
}

.post-network[data-network=facebook] .post-network-ribbon {
  border-top-color: #2d4373;
}

.post-network[data-network=twitter] .post-network-ribbon {
  border-top-color:#0087ba;
}
.img {
	position: relative;
    width:  100%;
    height: 200px;
    background-position: center center;
    background-repeat:   no-repeat;
    background-size:     cover;
	background-color: #000;
}

@media screen  and (max-width: 768px) {
	.img {
		height: 260px;
	}
}