body{
    margin:0;
    padding:0
}

h1,h2,h3,h4,a,input,button,.btn-standard{
    font-family:'Epilogue', sans-serif;
}

p,li{
    font-family:'Roboto', sans-serif;
}

p strong{
    color:#003399;
}

p a{
    color:#003399;
    border-bottom:1px solid #003399;
}

.solidblue{
    color:#003399
}

.darkgray{
    color:#3c3744
}

.lightgray{
    color:#c0c5c1
}

.metal{
    color:#7d8491
}

.cream{
    color:#fbfff1
}

.footer .container{
    text-align:center;
    display:flex;
    flex-direction:column;
}

.more-features ul{
    margin:20px 0 10px;
    padding:0;
}

.container{
    margin:0 auto;
    width:100%;
    max-width:1000px;
}

.contact-info {
    background: #3C3744;
    color: #ccc;
}

.hero-banner {
    background: #FBFFF1;
    min-height: 50vh;
    padding: 10vh 0;
}

.social-proof {
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.features-intro {
    text-align: center;
}

.features-intro ul{
    text-align:left;
    display:flex;
    list-style:none;
}

.photo-text,
.text-photo {
    display:flex;
    margin:10px 0;
    background: #c0c5c169;
    /* padding:20px 40px */
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0px 10px 40px 1px rgba(0,0,0,0.1) inset;
}

.photo-text img,.text-photo img{
    padding:5px;
    background:#fff;
    box-shadow:0px 5px 5px 1px rgba(0,0,0,0.2);
}

.more-features{
    display:flex;
    margin: 50px 0px 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.cta {
    background: url(images/bg-cta.jpg) center center no-repeat #003399;
    padding: 50px 0 40px;
    color: #fff;
    text-align: center;
    margin: 30px 0 0;
    background-size: cover;
}

.col{
    flex:1;
    padding: 20px 30px;
}

.footer{
    background:#3C3744;
    padding:20px 0;
    color:#fff;
    text-align:center;
}

.footer a{
    color:#fff;
    font-family: 'Arimo',sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
}

blockquote{
    padding: 50px 50px 50px 120px;
    background: url(images/openquote.svg) 30px 20px #c0c5c169 no-repeat;
    margin:20px 0;
    border-radius: 30px;
    background-size: 70px;
}

@media(min-width:768px){
    .container{
        display:flex;
        flex-wrap:wrap;
    }

    .hero-banner .container{
        padding-right:25%;
        max-width:500px;
        margin:0 auto;
    }
    
}

.hero-banner a{
    color:#fff;
    font-size:15px;
    margin:5vh 0 0;
    display:inline-block;
    background:#003399;
    padding:10px 20px;
    border-radius:5px;
    border-bottom:2px solid rgba(255,255,255,0.3);
    font-weight:bold;

}

.hero-banner{
    background:url(images/main-hero.jpg) center 73% no-repeat;
    background-size:cover;
}

.header{
        padding:10px 0;
        border-bottom:1px solid #eee
    }

    .header .container{
        justify-content:space-between;
    }

.hero-banner .container{
    flex-direction:column;
}
        .logo{
            flex:1;
        }

        .navigation{
            flex: 4;
            max-width: 400px;
        }

            .logo img{
                max-width:100%;
            }
        .mainmenu{
            display:flex;
            list-style:none;
            justify-content:space-between;
            flex: 3;
            padding: 0;
        }

            .mainmenu li a{
                color:#003399;
                font-size:18px;
                font-weight:bold;
            }

a{
    text-decoration:none;

}

h1{
    font-size:52px;
}

h2{
    font-size:40px;
}

h3{
    font-size:36px;
}

h4{
    font-size:30px;
}

p{
    font-size:18px;
    line-height:125%;
}

.footer p{
    color:#aaa;
    font-size: 12px;
}

.question{
    font-size:24px;
    border-bottom:1px solid #aaa;
    padding:0 0 20px;
    color:#003399;
    font-weight:bold;
}
blockquote h4 {
    margin: 0 0 10px;
    padding: 0 0 10px;
}

.col img{
    max-width:100%
}

.cta h2 {
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.social-proof ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.logos img {
    max-width: 100%;
}

.logos li {
    flex: 1;
    margin: 10px;
    text-align: center;
}

.main-features h3,
blockquote h4 {
    color: #333;
    /* letter-spacing: 1px; */
    text-shadow: 0px 1px 0px #fff;
    /* text-transform:uppercase; */
}


.features-list{
    flex-wrap:wrap;
    margin:20px 0;
    padding:0;
}
.main-features li {
    padding: 14px 16px;
    background: #3C3744;
    color: #fff;
    font-size: 16px;
    flex-basis:48%;
    box-sizing:border-box;
    margin:0 1% 1% 0;
    border-radius:5px;
}

.features-intro{
    margin:50px 20px
}

.contact-info .container {
    justify-content: space-between;
}

.contact-info p{
    font-size:13px;
}

.cta .container {
    max-width: 800px;
}

.btn-standard {
    margin: 20px auto;
    padding: 10px 20px;
    background: #fff;
    border-radius: 10px;
    font-size: 15px;
    color:#003399;
    box-shadow:0px 5px 5px 0px rgba(0,0,0,0.4);
    transition:0.3s ease all;
    border: 1px solid #eee;
    font-family:'Epilogue',Helvetica,Arial;
    font-weight:bold;
    text-transform:;
}

.btn-standard:hover{
    padding:12px 24px;
    margin-top:18px !ipmortant;
    margin-bottom:16px !important;
}

.social-proof p {
    font-size: 14px;
    text-align: center;
    color: #888;
    line-height: 1.5em;
    margin: 0 0 20px;
}

.faqs .container {
    flex-direction: column;
}

.faqs .container {
    flex-direction: column;
}

.faqs{
    background:#f8f8f8;
    margin:-30px 0 0 !important;
    
}

@media(max-width:500px){ 
    .faqs .container {
        flex-direction: column;
    }

    .hero-featurelist{
        background-image:none !important;
        background-color:#f6f6f6 !important;
        padding:40px 20px !important;
        min-height:unset !important;
        margin-bottom:30px;
    }

    .faqs{
        background:#f8f8f8;
        margin:-30px 0 0 !important;

    }

    .contact-info .container {
        display: flex;
        /* padding: 0 10px; */
    }

    .header .logo {
        text-align: center;
    }

    .navigation{
        margin:0 auto;
        width:100%;
    }

    .mainmenu{
        padding:0;
        margin: 15px 0 5px;
    }

    .hero-banner{
        padding:5vh 20px;
        background:#ddd;
    }

    .main-cta{
        display:flex;
        justify-content:space-around;
    }

    .main-cta a{
        font-size:18px;

    }

    .social-proof .logos{
        padding:0;
        flex-wrap:Wrap;
    }

    .social-proof .logos li{
        flex-basis:40%;
    }

    h2{
        font-size:28px;
    }

    h3{
        font-size:24px;
        margin:0;
        padding:0;
    }

    .features-list, .col,.photo-text,.text-photo{
        flex-direction:column;

    }

    .photo-text,.text-photo{
        margin:0;
        padding:20px 0;
    }

    .more-features{
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
    }
    .onethird{
        
    }
    .twothirds{
        display:none;
    }

    .cta{
        padding:30px 20px 80px;
        margin:0;
    }

    h1{
        font-size:40px;
    }

    blockquote {
        padding: 50px 20px 20px 50px;
        background-size: 30px;
    }


}

.main-content {
    max-width: 1000px;
    margin: 20px auto;
}

form {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0px 5px 15px 1px rgba(0,0,0,0.1);
}

form{
    font-family:'Roboto';
}

form label{
    margin:15px 0 5px;
}

form label{
    font-weight:bold;
    font-size:15px;
}

form input[type="text"],
form input[type="email"],
textarea{
    padding:8px 5px;
    border:1px solid #ccc;
}

form input[type="submit"]{
    background:#111;
    color:#fff;
    border:none;
    width:fit-content;
    
    margin:20px 0;
    font-size:21px;
    padding:10px 20px;

}

@media(min-width:992px){

    .row{
        display:flex;
    }
    .one-thirds {
        flex:1;
    }

    .two-thirds {
        flex:2;
        padding-left:20px
    }

    .one-thirds,
    .two-thirds{
        padding:0;
    }
}

.one-thirds,
.two-thirds{
    padding:10px 20px;
}

.row{
    border-bottom:1px dotted #ccc;
    margin:20px 0;
    padding:10px 0;
}

.hero-featurelist {
    background: url(images/bg-featurelist.jpg) right 75% no-repeat;
    background-size: cover;
}

.screenshots{
    padding:20px 0 50px;
    margin-top:40px !important;
    background:#f6f6f6;
}

.screenshots .one-thirds{
    display:flex;
    align-items:center;
    align-content:center;

}

.screenshots .one-thirds img{
    padding:5px;
    box-shadow:0px 5px 20px 1px rgba(0,0,0,0.2);
    max-width:100%;
    border:1px solid #ccc;
}

.fullfield {
    flex-basis: 100%;
    display: flex;
    flex-direction:column;
}

.formField {
    flex-basis:48%;
    display:flex;
    flex-direction:column;
    padding:0 10px 10px 0
}

.formField input{
    margin-bottom:5px;
}

form#demoform {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.sub-nav {
    background: #fafafa;
}

.sub-nav ul{
    display:flex;
    list-style:none;
    padding:0;
    margin:10px 0;
}

@media(max-width:500px){
    .sub-nav ul{
        flex-wrap:wrap;
        justify-content:center;
        margin:0;
        padding:10px 0;
        text-align:center;
    }
    .sub-nav ul li{
        flex-basis:50% !important;
    }

    .container{
        padding-left:20px;
        padding-right:20px;
        box-sizing:border-box;
    }


}

.sub-nav ul li a{
    font-family:'Roboto';
    color: #3C3744;
    font-weight:bold;
    font-size:13px;
    margin: 0 8px 0 0;
    text-shadow:0px 1px 0px #fff;
    transition:0.5s ease all;
    border-bottom:1px solid #fafafa;
    border-right:1px dotted #ccc;
    padding-right:8px
}

.sub-nav ul li:last-child a{
    border:none !important;
}
.sub-nav ul li a:hover{
    border-bottom:1px solid #003399;
}

@media(max-width:991px){
    .sub-nav ul li a{
        border:none !important;
        padding:0;
        margin:0
    }
    .hero-featurelist{
        background-position:right top !important;
    }

    .screenshots .row{
        display:flex;
        flex-direction:column
    }
    .screenshots .one-thirds{
        order:2;
    }

    .screenshots .two-thirds{
        order:1;
    }

    .screenshots{
        border-top:1px solid #aaa;
        
    }
}

@media(min-width:992px){
.more-features .onethird {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.more-features .btn-standard{
    margin:20px auto 0 0;
}
}

p{
    line-height:1.5em;
    color: rgba(0,0,0,0.8);
}

.cta p{
    color:#fff;
    text-shadow:0px 1px 5px rgba(0,0,0,0.5);
}

.footer a{
    border-bottom:none;
    font-size: 13px;
}

.checkboxfield{
    float:left;
    width:100%;
}
.checkbox-choices {
    background: #fafafa;
    width: 100%;
    float: left;
    padding:10px;
    border:1px solid #eee;
    border-radius:10px;
    margin:10px 0 20px;
    display:flex;
    flex-wrap:wrap;
    box-sizing:border-box;
}

.checkbox-choices p{
    flex-basis:40%;
    font-size:15px;
    padding:5px;
    margin:0;
}

@media(max-width:768px){
    .checkbox-choices p{
        flex-basis:100%;
    }

    .formField{
        flex-basis:100% !important;
    }
}

.block{
    display:block !important;
}