body{
  background-color: #eceef1;
  margin:0;
  font-family: Arial, sans-serif;
}

/*.default-toggle-button{
    z-index: +2;
    position: absolute;
    margin: 1em;
    font-size: 2em;
    color: #ffe000;
    text-shadow: 1px 1px;
}*/

.main-menu{
  background-color: rgba(0,0,0,0.75);
  height: 4em;
  width:100%;
  text-align: right;
  font-family: 'Open Sans', sans-serif;
  position: fixed;
  z-index: +1;
}

.content-left a{
  padding: 1em;
  display: block;
  color: #d9c07c;
  font-size: 0.9em;
  vertical-align: top;
  margin-top:0.5em;
  text-decoration: none;
  width: -webkit-fill-available;
}
.content-left a:hover{
  background-color: rgba(0,0,0,0.75);
}
.content-left .selected{
  background-color: rgba(0,0,0,0.5);
}
.club-selection{
  border:1px dotted #eee;
  width:100%;
  height:2em;
  line-height:2em;
}
.main-menu img{
  padding-left: 15vw;
  float: left;
  height:2.9em;
  margin:0.5em;
}
.main-menu>.logout{
  margin-left:10vw;
}

.content{
  width: 700px;
  position: absolute;
  top: 5em;
  left: 30vw;
}

.content-right{
  width: 20vw;
  max-width:17em;
  top: 5em;
  left: calc(30vw + 700px + 2em);
  text-align: center;
  position: fixed;
}
.content-left{
  width: 15vw;
  max-width: calc((100vw - 700px - 6em) / 2 );
  top: 5em;
  left: calc(15vw - 2em);
  position: fixed;
}
.content-date{
  font-size: 0.9em;
  color: grey;
  float:left;
}
@media only screen and (max-width: 1000px) {
  .main-menu>a{
    display:none;
  }
  .content{
    width:96vw;
    left:1.5vw
  }
  .content-right{
    display: none;
  }
  .content-left{
    display: none;
  }
  iframe{
    max-height: 100vw;
    margin: -0.75em 2.5% -45vw 2.5% !important;
  }
}

.post{
  width:100%;
  border-radius: 0.5em;
  border: 1px dotted grey;
  background-color: white;
  padding:0.5em;
  margin-bottom: 0.8em;
  color: black;
}
.post-header{
  font-weight: bold;
  margin: 0 5%;
}
.courseLogo{
    max-width: 4em;
    max-height: 2.5em;
    margin: 0 1em 0 -1em;
    vertical-align: middle;
}
.post-content{
    border-radius: 0 0 0.5em 0.5em;
    border: 1px solid grey;
    border-top: 0;
    width: calc(95% - 1em - 2px);
    margin: 0.5em 2.5% 0.2em 2.5% !important;
    padding: 1.5em 0.5em 1em 0.5em;
    position: relative;
    top: -0.85em;
    padding-top: 0.5em;
}
.post-table{
  text-align: center;
  display: flex;
  margin-top:0.5em;
}
.post-table div{
  flex:1;
}
.post-video{
  max-width: 95%;
  max-height: 90%;
  margin:1em 2.5% 0 2.5%;
  width:95%;
  border-radius: 0.5em 0.5em 0 0;
  box-shadow: 0 0 2px black;
  z-index: +1;
}

iframe{
  width: 190%;
  height: 746px;
  margin: -0.75em 2.5% -371px 2.5%;
  border-radius: 1em 1em 0 0;
  box-shadow: 0 0 4px black;
  border: 0px;
  transform: scale(0.5);
  transform-origin: top left;
}
.fullscreen{
  position: relative;
  top: 2em;
  font-size: 1.5em;
  z-index: +1;
  left: 630px;
}
.filler-r1{
  height:300px;
}
.filler-r2{
  height:300px;
}
.filler-l1{
  height:calc(100vh - 400px);
}

.nice-shot{
    width: 4.2em;
    height: 4.2em;
    float: right;
    margin-top: -4em;
    background: url('/img/NICE SHOT A.svg');
    display:none;
}
.nice-shot:hover{
    background: url('/img/NICE SHOT B.svg');
}
.post-footer{
  margin:0 2%;
  width:96%;
  text-align: right;
}
.post-footer div{
  display:inline-block;
  vertical-align: middle;
}

.nice-shot-button{
  padding: 0.3em 0.7em;
}
.nice-shot-button:hover{
    background-color: rgba(0,0,0,0.75);
    color:#d9c07c;
}
.playAll{
    width: 100%;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 0.5em;
    text-align:center;
    background:#0b0;
}

.post-share a{
    display: inline-block;
    margin: auto 3px;
    text-decoration: none;
    transition: all 0.2s ease 0s;
    transform: translateY(0px);
}
.post-share-fbColor,.post-share-twColor,.post-share-emailColor{
    color: #eee;
}
.post-share-fbColor:hover{
    color: rgb(59, 89, 152);
}
.post-share-twColor:hover{
    color: rgb(43, 169, 225);
}
 .post-share-emailColor:hover{
    color: rgb(147, 149, 152);
}