.overlay{
	transition: .5s opacity ease;
}

.overlay.hide-overlay {
	opacity: 0;
	pointer-events: none;
}

.pg-button.hide-overlay {
    opacity: 0;
    pointer-events: none;
}

.posrel{
    width:100%;
    height:auto;
    position:relative;
}

#loopingVideo video{
    width: 100%;
    position: relative;
    top:0;
    left:0;
    margin-bottom:-5px; 
}

.pg-button {
    display: inline-block;
    height: 50px;
    background: rgba(0,0,0,.6);
    border-radius: 4px;
    cursor: pointer;
    z-index: 99;
    overflow: hidden;
    transition: background .25s ease,bottom .25s ease;
    font-size: 18px;
    text-shadow: none;
    letter-spacing: .5px;
}

.pg-button p{
    display: inline-block;
    font-family: "FranklinITCProBold";
    font-size: 16px;
    color: #fff;
    line-height: 50px;
    margin: 0 20px;
}

@media (max-width: 768px) {
    .pg-button{
	    margin: 20px 0;
	}
}

.pg-button p:before{
	font-family: FontAwesome;
	content: '\f028';
	margin-right: .6em;
	font-size: .9em;
}

.pg-button.played-once p:before{
	content: '\f04b';
	font-size: .7em;
}


.pg-button:hover {
    background: rgba(0,0,0,1);
    text-decoration: none;
}



/* Make sure play button doesn't show up on ipad/iphone */

@media (min-width:767px) {
     video::-webkit-media-controls-start-playback-button {
      display: none !important;
      -webkit-appearance: none;
    }
 } 

@media (max-width:980px) {

.overlay.hide-overlay {
    opacity: 1;
}

.hide-overlay .pg-button {
    opacity: 0;
    pointer-events: none;
}


}

/* rewrite styles from standard enterprise template to percents because of video weirdness */

.sf-top {
    top: 5%;
}
.sf-vertical-center {
    top: 30%;
}
.sf-bottom {
    bottom: 20%;
}
.sf-left {
    left: 5%;
}
.sf-right {
    right: 5%;
}
.sf-horizontal-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
    left: 0;
    right: 0;
}