/*  RESET */

*{-webkit-box-sizing:border-box;box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-spacing:0;border-collapse:collapse}abbr{text-decoration:none}button,input:not([type=radio]):not([type=checkbox]){-webkit-appearance:none}input[type=search]{-webkit-appearance:textfield}button{font:inherit}

@font-face {
  font-family: 'Abril Titling Bold';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/abril-titling/AbrilTitling-Semibold.woff2") format("woff2"), url("../fonts/abril-titling/AbrilTitling-Semibold.woff") format("woff"); }

/*
  Font family: PT Sans
  Source: https://fonts.google.com/specimen/PT+Sans
*/
@font-face {
  font-family: 'PT Sans';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/pt-sans/PTSans-Regular.woff2") format("woff2"), url("../fonts/pt-sans/PTSans-Regular.woff") format("woff"); }

@font-face {
  font-family: 'PT Sans';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/pt-sans/PTSans-Bold.woff2") format("woff2"), url("../fonts/pt-sans/PTSans-Bold.woff") format("woff"); }

/*
  Font family: PT Serifs
  Source: https://fonts.google.com/specimen/PT+Serif;
*/
@font-face {
  font-family: 'PT Serif';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/pt-serif/PTSerif-Regular.woff2") format("woff2"), url("../fonts/pt-serif/PTSerif-Regular.woff") format("woff"); }

@font-face {
  font-family: 'PT Serif';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/pt-serif/PTSerif-Bold.woff2") format("woff2"), url("../fonts/pt-serif/PTSerif-Bold.woff") format("woff"); }


  body{
    font-family: "PT Sans", Times, serif;
    background: white;


  }

  .container {
    margin: 0 auto;
    max-width: 552px;
    padding: 0px;
    background: #ffffff;
}

.video-wrapper {
    position: relative;
    width: 273px;
    display: inline-block;
    margin-bottom: 6px;
    margin-top: 20px;
    padding: 8px;
}

.video-wrapper>video {
    width: 100%;
    vertical-align: middle;
}

.video-wrapper>video.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    /*background-image: linear-gradient(transparent, #000);*/
    transition: opacity 150ms;

    display:none;
}

.video-wrapper p{
    position: absolute;
    top: -13px;
    right: 8px;
    font-size: 13px;
    font-weight: 600;

}

.video-wrapper-single {
    display: block;
    margin: 32px auto 12px auto;
}

video{

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    overflow:hidden;
    border: 1px solid #dadada;
}
.para {
    text-align: center;
}

.para p:first-child {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
}
.para p:nth-child(2n){
    color: #4A4A4A;
}

.para p:nth-child(3n){
    line-height: 1.4;
    margin: 10px 0 20px;
}


.source{

    font-style: italic;
    color: #707070;
    font-size: 13px;
}

.is-hidden {
    opacity: 0;
}
.is-shown {
    opacity: 1;
}
.circle{
    width: 15px;
    position: absolute;
    height: 15px;
    background: red;
    top: 17px;
    right: -2px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
    animation: blinker 0.5s cubic-bezier(.4, 0, 1, 1) infinite alternate;
    display:block;
}

.circle-show{
    display:block !important;
}
.circle-hide{
    display:none !important;
}

  @keyframes blinker {  
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @media all and (max-width: 550px) {
    .source {
        text-align: left;
    }
    .video-wrapper {
        width: 81%;
    }
    .video-overlay-play-button{
        display: block;
    }
    .circle{
        display:none;
    }
    .container {
        text-align: center;
    }
  }