/* = Quality Devs Reset CSS
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
}
html{height:100%;min-height:100%;}
body {
    line-height: 1;margin:0;padding:0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:24px; 
    color: #000;
    background: url(img/background.jpg) no-repeat center top #000;
    background-attachment: fixed;
    width:100%;
    height:100%;
    min-height:100%;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal; 
    font-size: inherit;
}
ol, ul {
    list-style: none;
    margin:0;
    padding:0;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    color:inherit;
}

a img {
    border: none;
}
a:hover{
    text-decoration:underline;
}
.fix{clear:both;}

*:focus {
    outline: 0;
}

*{

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/****************** LAYOUT **************************/

#web_container{
    width:1200px;
    max-width:98%;
    margin:0 auto;
}

#logo_ext{
    display:block;
    margin:0px auto;
    padding: 30px 0;
}

#content_container{
    width:100%;
    min-height:600px;
    background: rgba(255,255,255,0.85);
    padding: 35px 80px 80px;
    text-align:center;
    margin-bottom:60px;
}

#web_container h1{
    font-size: 45px;
    margin-bottom:40px;
}
p {text-align:center;line-height:28px;}
p span{font-family: "SignPainter", sans-serif;font-size:30px;}

#features{
    width:590px;
    margin: 50px auto;
}

#features h2{
    margin-bottom:5px;
    color: #f92925;
}

#features_box{
    width:100%;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background: url(img/logo_background.png) center 0 #eeeeee;
    background-size: 100% auto;
    padding: 15px 50px;
}


#features_box ul li{
    text-align:left;
    line-height:34px;
    padding-left: 50px;
    background: url(img/bullet.png) no-repeat left center;
    margin: 0 0 8px 0;
}

a.btn{
    display:inline-block;
    height: 45px;
    line-height:45px;
    padding: 0 15px;
    margin-top:30px;
    background-color: #f92925;
    color:#fff;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 2px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 2px 5px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: all 700ms;
    transition: all 700ms;
}
a.btn:hover{color:#000;text-decoration:none;}

#demo_view{
    -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 20px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 20px 0px rgba(50, 50, 50, 0.75);
}

footer{
    background-color: #f92925;
    padding: 20px 0 0;
    border-top: solid 2px #eeeeee;
    color: #fff;
    text-align:center;
}

footer h2{
    font-weight:lighter;
    font-size:34px;
    text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
    margin-bottom:8px;
}

footer div{
    height:40px;
    line-height:40px;
    background: #000;
    font-size:14px;
    font-weight:normal;
    color:#99a3a5;
    margin-top:20px;
}
footer div a{color:#99a3a5;}
footer div a:hover{color:#fff;text-decoration:none;}

.mobile{display:none;}


@media (max-width:1624px) {
    body{background-size: 100% auto;}
}

@media (max-width:1400px) {
    #web_container{padding: 0 100px;width: 100%;}
}

@media (max-width:1320px) {
    body{font-size:22px;}
    p {text-align:center;line-height:24px;}
    p span{font-family: "SignPainter", sans-serif;font-size:26px;}
    
    #features_box{padding: 15px 70px;}
    #demo_view{width:90%;}
    
}

@media (max-width:1150px) {
    #content_container{padding: 35px 40px 80px;}
    #web_container h1{font-size:36px;}
    #logo_ext{width:250px;}
}

@media (max-width:940px) {
    #web_container{padding: 0 50px;}
    
    .mobile{display:inline;}
    .desktop{display:none;}
}

@media (max-width:840px) {
    body{font-size:18px;}
    p {text-align:center;line-height:24px;}
    p span{font-family: "SignPainter", sans-serif;font-size:24px;}
    #features{width: 100%;padding: 0 30px;}
    #web_container h1 {font-size: 30px;margin-bottom: 30px;}
    #features_box{padding: 15px 30px;}
}


@media (max-width:600px) {
    footer h2{font-size:20px;}
    footer img{width:180px;}
    footer .separator{display:none;}
    footer a{display:block;}
    #web_container {padding: 0 10px;}
    #web_container h1 {font-size: 20px;}
    body{font-size:14px;}
    p {text-align:center;line-height:18px;}
    p span{font-family: "SignPainter", sans-serif;font-size:18px;}
    #features{padding: 0;}
}

.videoContainer{
    width:100%;
    max-width:853px;
    margin: 0 auto;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}