/**** Copyright 2013-2022 Adam Solesby ***********/

@import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,700);

/* Yahoo Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}


html, body {
  overflow: initial;
  background: none;
}

BODY
{
    font-family:'Maven Pro', helvetica, arial, sans-serif;
    box-sizing: border-box;
}

dd ul { list-style: square inside;}
dd ul li { padding-left:20px; }

div { box-sizing: border-box; }

H1  { font-family: 'Maven Pro', sans-serif; font-weight:400; font-size:400%; }
H1 strong { font-family: 'Maven Pro', sans-serif; font-weight:700; }
H2 {font-weight:400; font-size:200%;  }
H3 {font-weight:400; font-size:130%;  }
H4 {font-weight:500; font-size:130%;  }

p { margin-top:10px;}

.brandcolor { color:#63CAE6; }
.brandlink  { color:#0000FF; }
.brandbg    { background-color:#63CAE6; }
.white      { color:#fff; }
.black      { color:#000; }
.dark       { color:#333; }
.light      { color:#ccc; }
.hidden     { display:none; }
.center     { text-align:center; }
.fixed      { position: fixed;}
.strong     { font-weight:500; }


a.brand, span.brand { font-family: 'Maven Pro', sans-serif; font-weight:700; text-decoration:none; }

.PRO { color:#666; border:2px solid #666; border-radius:5px; padding: 0px 2px 0px 2px;}

h3 .PRO { font-size:14px; line-height:18px;}

section
{
    padding: 10px 0 0 0;
    float: left;
    width: 100%;
    margin:0;
    box-sizing: border-box;
}

.wrap
{
    min-width: 600px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
/*    border:1px solid blue;*/
}




.iphone
{
    width: 280px;
    height: 592px;
    background: url(img/white5s.png) no-repeat;
    background-size: 280px;
    padding-left:23px;
    padding-top:83px;
}

.iphone img
{
    width:236px;
    border:1px solid #111;
}

.product
{
    top:10px;
    padding-left:6px;
}

.feature { min-width:200px; max-width:360px; width:50%; padding:18px;  margin:0px; float:left; box-sizing: border-box;}
.feature h3 { color: #63CAE6; }

.brand_box      { padding:10px; position:relative; width:400px; background:rgba(33,33,33,0.6); top:-570px; left:350px; z-index:2; /* border:2px solid red;   */ }
.brand_features { padding:10px; position:relative; width:400px; background:rgba(33,33,33,0.6); top:-570px; left:350px; z-index:2; /* border:2px solid blue;  */ }
.brand_appstore { padding:10px; position:relative; width:400px; background:rgba(33,33,33,0.0); top:-570px; left:350px; z-index:2; /* border:2px solid green; */ padding-top:40px;}
.brand_features .feature { min-width:100%; width:100%; float:none; padding-top:10px; }

.highlight { background-color:#fff; padding:0;}
.highlight .feature { margin:0; margin-left:340px; max-width:560px; }
.highlight .more { margin:0; margin-left:340px;  max-width:560px;  color:#fff; }

#feature1  { background-color:rgba(160,160,160,1); } #feature1 .feature  { background-color:rgba(160,160,160,0.95); }
#feature2  { background-color:rgba(110,110,110,1); } #feature2 .feature  { background-color:rgba(110,110,110,0.95); }
#feature3  { background-color:rgba( 48, 48, 48,1); } #feature3 .feature  { background-color:rgba( 48, 48, 48,0.95); }

#intro     { background-color: #314F62; color:#ffffff; background: #333 url(img/office_blur.jpg) no-repeat; background-size: 100% auto; height:622px;}
#video     { background-color: #151515; color:#ffffff; }
#quotes    { background-color: #63CAE6; color:#cccccc; padding-bottom:20px;}
#features  { background-color: #222222; color:#cccccc; }
#footer    { background-color: #ffffff; color:#cccccc; height:100px;}

#features A { color:#fff; }

blockquote { padding:30px; quotes: "\201C""\201D"; color: #333; font-size:30px;}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.10em;
  vertical-align: -0.4em;
}
blockquote p { display: inline; }
.quote_attribute { text-align:right; width:100%; color:#666; }
.quote_attribute a { color:#666; }

.terms { color:#ccc; }
.copyright { color:#ccc; font-size:80%; margin:10px;  }
.copyright .right { float:right; }
.copyright a { margin-right:6px; }

/* https://embedresponsively.com/ */
.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px){
    #intro { background-size: auto 100% ;}
}

/* mobile overrides */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    #intro { background-size: auto 100% ; height:1046px; width:100%; padding:0; }
    .wrap    { min-width:100%; max-width:100%; padding:0;margin:0;}
    #intro .wrap { height:930px; }
    .section { min-width:100%; padding:0; }
    .feature { width:100%; }
    .product { top:110px; }
    #intro .product { margin-top:46px; margin-left:16px;}
    .highlight .feature { margin-left:10px; }
    .brand_box      { position:absolute; left:0; margin:0; padding:0; width:100%; top:0; height:110px; }
    .brand_features {                    left:0; margin:0; padding:0; width:100%; top:-60px; background:rgba(33,33,33,0.9); padding-top:20px; }
    .brand_appstore {                    left:0; margin:0; padding:0; width:100%; top:-60px; background:rgba(33,33,33,0.9); padding-top:20px; padding-bottom:22px;}

    .sticky {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -o-sticky;
        position: -ms-sticky;
        position: sticky;
        z-index: 2;
    }

    .copyright .right { float:none; margin-top:10px; }

}

/*.feature { border:1px solid white; }*/