.flip-container {
    perspective: 1000;
    -webkit-perspective: 1000; /* Safari and Chrome */
    margin: 10px 0;
  }
  /* flip the pane when hovered */
  .flip-container:hover .flip-inner, .flip-container.hover .flip-inner {
    transform: rotateY(180deg);
    -ms-transform:rotateY(180deg); /* IE 9 */
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
  }

  /* flip speed goes here */
  .flip-inner {
    transition: 0.6s;
    -webkit-transition: 0.6s; /* Safari */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d; /* Safari and Chrome */

    position: relative;
    height: 100%;
  }

  /* hide back of pane during swap */
  .front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility:hidden; /* Chrome and Safari */
    -moz-backface-visibility:hidden; /* Firefox */
    -ms-backface-visibility:hidden; /* Internet Explorer */
    
    width: 100%;
    height: 100%;
  }

  /* front pane, placed above back */
  .front {
    z-index: 2;
    position: relative;
  }

  /* back, initially hidden pane */
  .back {
    transform: rotateY(180deg);
    -ms-transform:rotateY(180deg); /* IE 9 */
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    position: absolute;
    top: 0;
    left: 0;
  }


  .circle {
    position:relative;
    width: 100%; 
    height: 0;
    padding: 50% 0; //padding top & bottom must equal width 
    border-radius: 50%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    overflow: hidden;

  }

  .circle-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  }

/*

  .mycontent > div  {
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
  }
*/
  

  

  .circle-inner > div {
    display: table;
    width: 100%;
    height: 100%;
  }
  .circle-inner > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 0 10%;
  }

  .circle-inner > div > div > img {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .circle-inner .heading {
    font-weight: bold;
    font-size: 14px;
    padding: 0 0 5% 0;
  }

  .circle-inner .text {
    margin:0;
    font-size:9px;
    padding: 5% 0 0 0;
    line-height: 17px;
  }

  .back .circle.dark {
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.6);
    background:#134886;
    color: #F2F4F8;
  }

  .back .circle.dark .heading {
    border-bottom: 1px solid #eeede9;
  }

  .back .circle.light .heading {
    border-bottom: 1px solid #134886;
  }

  .back .circle.dark a {
    color:#F2F4F8;
  }
     

  .back .circle.light {
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.6);
    background: #F2F4F8;
    color:#134886; 
  }

.author-banner {
  background: #134886;
  color:#F2F4F8;
  margin-left: -200px;
  padding-left: 200px;
  height: 100%;
}

.author-banner p {
  font-size: 11px;
}

.author-banner .name {
  font-size: 24px;
}


.center {
  margin: 8% auto;
}



/* maps */

#map_container img{max-width: inherit !important;}

#map_container p {
  background: #fff;
  color: #444;
  font-size: 0.9em;
  text-align: left;
  line-height: 1.1em;
}

#map_container a {
  color: #4D90FE;
  font-size: 0.9em;
}

.map-avatar {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  display: inline-block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.map-photo {
  display: block;
  margin: 0 auto;
}

.info {
  position:absolute;
  top:0;
  right:0;
  bottom: 0;
}
.info div {
  background:#f2f4f8;
  padding:10px;
  width: 300px;
  height: 100%;
  overflow-y: scroll;
}


#map_container .infoWindow-header {
  font-size: 1.4em;
}
#map_container .infoWindow-header small {
  font-size: 60%;
}

#map_container .avatars {
  text-align: center;
}

/* Shopify feed */

.product-feed-item {
    display: inline-block;
    vertical-align: top;
    width: 31%;
    margin-right: 2%;
    text-align: center;
}
.product-feed-item img {
    max-width: 100%;
    height: auto;
}