/* Newsletter */

.newsletter {
    position : fixed;
    z-index : 9999;
    right : 0;
    left : 0;
    width : 80%;
    margin : auto;
    padding : 18px;
    transition : all .4s cubic-bezier(.4, 0, .2, 1);
    background: #000000; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #000000 , #0011ff); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #000000 , #0011ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .newsletter.bottom {
    bottom : -350px;
    animation-name : cpnewsletterbottom;
    animation-duration : 1s;
    animation-iteration-count : 1;
    border-radius : 10px 10px 0 0;
    }
    
    @keyframes cpnewsletterbottom {
    0% {
        transform : translateY(100%);
    }
    100% {
        transform : translateY(0%);
    }
    }
    
    .newsletter.bottom:hover {
    bottom : 0;
    }
    
    .newsletter.bottom .newsletter-icon {
    margin : -50px auto 70px;
    }
    
    .newsletter.bottom:hover .newsletter-icon {
    margin-bottom : 0;
    }
    
    .newsletter.top {
    top : -255px;
    animation-name : cpnewslettertop;
    animation-duration : 1s;
    animation-iteration-count : 1;
    border-radius : 0 0 10px 10px;
    }
    
    @keyframes cpnewslettertop {
    0% {
        transform : translateY(-100%);
    }
    100% {
        transform : translateY(0%);
    }
    }
    
    .newsletter.top:hover {
    top : 0;
    }
    
    .newsletter.top form {
    margin-bottom : 150px;
    transition : all .8s cubic-bezier(.4, 0, .2, 1);
    }
    
    .newsletter.top:hover form {
    margin-bottom : 40px;
    }
    
    .newsletter.top .newsletter-icon {
    position : absolute;
    bottom : 0;
    left : 50%;
    margin : 0 0 -40px -30px !important;
    }
    
    .newsletter-icon {
    width : 70px;
    height : 70px;
    text-align: center;
    line-height: 70px;
    cursor : pointer;
    transition : all .8s cubic-bezier(.4, 0, .2, 1);
    animation : cpnewslettericon 2s infinite;
    border-radius : 100%;
    box-shadow : 0 0 0 2px #0011ff;
    background: #0011ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #0011ff , #000000); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #0011ff , #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #FFF;
    font-size: 22px;
    }
    
    @keyframes cpnewslettericon {
    0% {
        box-shadow : 0 0 0 2px #000000;
    }
    50% {
        box-shadow : 0 0 0 1px #000000;
    }
    90% {
        box-shadow : 0 0 0 4px #000000;
    }
    100% {
        box-shadow : 0 0 0 1px #000000;
    }
    }
    
    
    .newsletter-title {
    font-size : 26px;
    margin-top : 10px;
    text-align : center;
    color : #FFF;
    }
    
    .newsletter form {
    margin : 26px auto;
    text-align : center;
    }
    
    @media screen and (min-width: 584px) {
    .newsletter form {
        width : 460px;
    }
    }
    
    .newsletter input {
    display : inline-block;
    }
    
    .newsletter input:focus ,
    .newsletter textarea:focus {
    outline : none;
    box-shadow : none;
    }

    
    @media screen and (max-width: 625px) {
    .newsletter.bottom .newsletter-icon {
        margin : -42px auto 70px;
    }
    .newsletter.bottom {
        bottom : -175px;
    }
    
    .newsletter.top {
        top : -208px;
    }
    
    .newsletter {
        width : 97%;
        padding : 0 10px;
    }
    .newsletter-title {
        font-size : 18px;
    }

    }



    /* POHOTO */

    .cameraRoll {
        width: 130px;
        height: 130px;
        background-size: cover;
        background-position: center center;
        overflow: hidden;
        border-radius: 50%;
    }

    .fullscreen {
        width: 100%;
        height: 100%;
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }

    /* CSS comes here */
    #video {
        border: 1px solid black;
        width: 320px;
        height: 240px;
    }

    #photo {
        border: 1px solid black;
        width: 320px;
        height: 240px;
    }

    #canvas {
        display: none;
    }

    .camera {
        width: 340px;
        display: inline-block;
    }

    .output {
        width: 340px;
        display: inline-block;
    }