/*
Theme Name: sydney-child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney
Version: 1.34
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/

/*Instagram Graph API*/
/*コンテナ*/
.instagram-container{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1px;
}

.instagram-item{
  width: 50%;
  padding:1px;
}

@media screen and (min-width: 768px){
  .instagram-item {
      width: 25%;
  }
}

a.instagram-card{
  display: block;
  position: relative;
}

.instagram-card__img{
  max-width: 100%;
  height: auto;
  display: block;
}

/*いいね数、コメント数*/
.instagram-card__badge{
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: 14px;
  color: #ffffff;
}

/*いいねアイコン、コメントアイコン*/
.instagram-icon{
	fill:#ffffff;
  display: block;
  width: 20px;
  height: 20px;
}

/*コメント*/
.instagram-card__comment{
  padding-left: 8px;
  padding-right: 8px;
	margin-bottom: 16px;
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color:#d65050;
}

/*マウスオーバー(モバイルは除外)*/
.instagram-caption{
  position: absolute;
  top: 0px;
  display: flex;
  align-items: center;
  color: #ffffff;
  overflow: auto;
  background-color: rgba(3,27,56,.7);
  line-height: 1.5;
  opacity: 0;
  transition: opacity .3s ease-out;
  height:100%;
  width:100%;
  padding: 12px;
}

@media screen and (min-width: 768px){
  a.instagram-card:hover .instagram-caption,
  a.instagram-card:focus .instagram-caption{
    opacity: 1;
  }
}