@font-face{
        font-family:'Glyphicons Halflings';
        src:url(/fonts/glyphicons-halflings-regular.eot);
        src:url(/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
            url(/fonts/glyphicons-halflings-regular.woff2) format('woff2'),
            url(/fonts/glyphicons-halflings-regular.woff) format('woff'),
            url(/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
            url(/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
    }

     .tapstone .credit button {
        overflow: hidden;
        position: relative;
        background: #FF5C00 none repeat scroll 0% 0%;
        border-radius: 1000px;
        font-size: 20px;
        color: #FFF;
        font-weight: 800;
        border: medium none;
        text-align: left;
        padding: 0.75em 0px 0.75em 1em;
        width: 80%;
        font-family: "Open Sans",sans-serif;
        font-size: 20px;
        color: #FFF;
        cursor: pointer;
    }
    
    .tapstone .credit button span {
        -webkit-animation:ripple .6s linear infinite;
        animation:ripple .6s linear infinite;
        position:absolute;
        right:8%;
        top:50%;
        -webkit-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        -o-transform:translateY(-50%);
        transform:translateY(-50%);
        border-radius:100%
    }
    
    @-webkit-keyframes ripple{
        0%{
            box-shadow:0 0 0 0 rgba(255,255,255,.1),0 0 0 20px rgba(255,255,255,.1),0 0 0 40px rgba(255,255,255,.1),0 0 0 60px rgba(255,255,255,.1)
        }
        100%{
            box-shadow:0 0 0 20px rgba(255,255,255,.1),0 0 0 40px rgba(255,255,255,.1),0 0 0 60px rgba(255,255,255,.1),0 0 0 80px rgba(255,255,255,0)
        }
    }
    
    @keyframes ripple{
        0%{
            box-shadow:0 0 0 0 rgba(255,255,255,.1),0 0 0 20px rgba(255,255,255,.1),0 0 0 40px rgba(255,255,255,.1),0 0 0 60px rgba(255,255,255,.1)
        }
        100%{
            box-shadow:0 0 0 20px rgba(255,255,255,.1),0 0 0 40px rgba(255,255,255,.1),0 0 0 60px rgba(255,255,255,.1),0 0 0 80px rgba(255,255,255,0)
        }
    }
    
    .glyphicon{
        position:relative;
        top:1px;
        display:inline-block;
        font-family:'Glyphicons Halflings';
        font-style:normal;
        font-weight:400;
        line-height:1;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale
    }
    
    .glyphicon-play-circle:before{
        content:"\e029"
    }
    
    .tapstone .credit {
        width: 80%;
        max-width: 650px;
        padding-top: 30px;
        height: auto;
    }
    
    .tapstone .credit p {
        color: #FFF;
        font-size: 12px;
        margin-top: 10px;
    }
    
    .layer {
        width: 90%;
        max-width: 700px;
        padding: 30px;
        margin-top: 40px;
        background-color: rgba(0, 128, 255, 0.71);
        border: 1px solid #FFF;
        font-size: 18px;
    }
    
    .layer .form__title {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .layer.tapstone .form__title,
    .fancy_box .tapstone .form__title {
        font-size: 26px;
        margin-bottom: 10px;
    }
    
    .fancy_box .tapstone .form__title {
        color: rgb(84, 129, 255);
    }
    
    .layer.tapstone .form__subtitle,
    .fancy_box .tapstone .form__subtitle {
        font-size: 22px;
        margin-bottom: 0px;
    }
    
    .fancy_box .tapstone .form__subtitle {
        color: #4D4D4D;
    }
    
    .layer.tapstone .credit,
    .fancy_box .tapstone .credit {
        max-width: none;
        width: 90%;
        
    }
    
    .fancy_box .tapstone .credit {
        padding-top: 15px;
    }
    
    .layer.tapstone .credit button,
    .fancy_box .tapstone .credit button {
        width: 100%;
    }
    
    @media screen and (max-width: 550px) {
        .tapstone .credit button {
            font-size: 15px;
            text-align: center;
            line-height: 24px;
            padding: 0.75em 1em 0.75em 1em;
        }
        
        .tapstone .credit button .glyphicon {
            display: none;
        }
        
        .layer {
            font-size: 15px;
            padding: 15px;
            width: 95%;
        }
        
        .layer .form__title {
            margin-bottom: 15px;
        }
        
        .layer.tapstone .form__title {
        }
    }
    
    @media screen and (max-width: 767px) {
    
        .tapstone .credit button {
            font-size: 15px;
        }

        .layer .form__title {
            font-size: 26px;
        }
        
        .layer.tapstone .form__title, 
        .fancy_box .tapstone .form__title  {
            font-size: 22px;
        }
        
        .layer.tapstone .form__subtitle, 
        .fancy_box .tapstone .form__subtitle  {
            font-size: 18px;
        }
        
        .layer.tapstone .credit, 
        .fancy_box .tapstone .credit  {
            max-width: none;
            width: 100%;
        }
    }