Im reseting this style for optimal view using Eric Meyer's CSS Reset - https://meyerweb.com/eric/tools/css/reset/
------------------------------------------------------------------ */
body, html  { height: 100%; }html, body, div, span, applet, object, iframe,/*h1,2, h3, h4, h5, h6,*/ p, blockquote, pre,a, abbr, acronym, address,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body { line-height: 1; }ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }:focus { outline: 0; }del { text-decoration: line-through; }table {border-spacing: 0; }

/* Clear Floated Elements https://sonspring.com/journal/clearing-floats */
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

/*------------------------------------------------------------------ */

/* Page Style */
body{
    color: #000;
    font-size: 14px;
    font-family: sans-serif;
    line-height: 20px;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #222222;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;}



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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


h3 {text-align: center;padding: .8em 0 0 0 ;}
h6 {text-align: center; font-size: .9em; padding: 0 0 1em 0;}
.topbanner {  text-align: center; background: #000}
.topbanner img {height: 50%; width: 50%;}
footer {background: black; color: #eee; padding: 1em 1em 3em;}
footer a {color: #eee; text-decoration: none; color: #eee;}
footer a:hover {color: #eee; opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */}
footer img {margin: 1.5em 0 0; width: 75%}
footer h3 {background: black; color: #eee; text-align: left; font-size: 1.3em; font-weight: 600;  margin: 0 ;}
.content {background: #eee;}
.facebook-link {font-size: 4em; padding: .1em 0 0 0; }

.center,
img.center {
    text-align: center;
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#coming-soon img{

    position:fixed;
    top: 25px;
    left: 50%;
    width:320px;


    padding: 20px
margin-top: -160px; /*set to a negative number 1/2 of your height*/
    margin-left: -160px; /*set to a negative number 1/2 of your width*/

}


#coming-soon a {
    position:absolute;
    top: 240px;
    left: 48%;
    text-decoration: none;
    color: white;
    font-size: 4em;


}

#coming-soon a:hover {

    color: darkred;

}

#coming-soon h2{
    text-align: center;
    font-size: 28px;
}

/*Submit Form*/
#subscribe{
    width: 552px;
    display: block;
    margin: 20px auto 40px auto;
    padding: 4px;
    background: rgba(0,0,0,0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

@media screen and (max-width:500px){








}



@media screen and ( max-width: 350px ){
    background: black;

    #coming-soon img{
        position: inherit;
        width: 100%;
        margin: 10% 0 0 0;

    }


    #coming-soon a {

        position:fixed;
        top: 60%;
        left: 45%;

        color: white;
        font-size: 4em;
        text-decoration: none;


    }
}
.caption {font-size: .9em; text-align: center; padding: 0 0 1em}












l screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 30em) {h3 {text-align: center;padding: .8em 0 0 0 ; font-size: 1.2em; font-weight: 700}
    h6 {text-align: center;margin: -.8em 0 0 0 ; font-size: .8em; font-weight: 7100} } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 30.063em) {h3 {text-align: center;padding: .8em 0 0 0 ; font-size: 1.8em; font-weight: 700}
    h6 {text-align: center;margin: -.8em 0 0 0 ; font-size: .9em; font-weight: 7100} } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */