body{
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    margin:auto;
    /*padding: 2em;*/
    font-size:100%;
    line-height: 1.25;
    text-align: left;  
}

#wrapper{
    /*width: 100%;*/
    /*padding: 1em;*/
    background: url("../img/appliedimpactrobotbg.png") no-repeat;
    background-position: top right;
}


.banner {
    padding: 0 1em;
}


.logo{
    background: url("../img/logo.svg");
    background-position: -9999px;
    background-size: 244px 40px;
    float: left;
    width: 244px;
    height: 40px;
    text-indent: -9999px;
}

.logomainnav{
    margin: auto;
    display: none;
    width: 244px;
    height: 40px;
}

.logo:active{
    /*background-color: #28364b;*/
    background-color: #ccc;
}

.hamburger{
    background: url("../img/hamburger_icon.svg");
    background-size: 40px 40px;
    float: right;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}

.hamburger:active{
    /*background-color: #28364b;*/
    background-color: #ccc;
}

#menutop{
    width: 100%;
    height: 40px;
    background-color: #efefef;
    position: fixed;
    margin-top: -32px;
}
            
h1, h2, h3 {
font-family: 'Righteous', cursive;
}
            
h1 {
    color: #28364b;
    font-style: normal;
    font-size: 3em;
}

h1.tophead{
    padding-top: 1em;
    text-shadow: 2px 2px #f1d4ba;
}

textarea, input {
    width: 100%;
}

.calloutheader{
    margin-top: 0;
    font-size: 1.5em;
    color: #fff;
}

.callouttext{
    font-size: 1em;
    color: #fff;
}

.product{
    width: 100%;
}

.aboutimg {
    float: left;
    width: 60%;
}

h2 {
    color: #28364b;
    font-style: normal;
    font-size: 2em;   
}

h3 {
    color: #74551d;
    font-style: normal;
    font-size: 1.25em;
}

.bluewrapper{
        width: 95%;
        margin: auto;
}

footer {
    font-size: .9em;
    line-height: 1.5;
    text-align: center;
}

nav {
    padding: 0;
    margin: 2em 0;
    width: 100%;
    background-color: #efefef;
}

nav ul {
    padding: 0;
    list-style: none;
}

nav li{
    border-top: solid 1px #666;

}

nav li a{
    display: block;
    padding: .5em 2em;
}

nav li a:link {
    color:#28364b;
}

a:visited{
    color:#28364B;
}

nav li a:hover{
    color: #28364b;
    background-color: #efefef;
    display: block;
}

nav li a:active{
    color: #d29128;
    background-color: #f1d4ba;
    display: block;
}

/* this is to declare the bottom stroke for the last button */
nav li:last-child { 
    border-bottom: solid 1px #666; 
}

.active{
    color: #28364b;
    background-color: #d29128;
}

blockquote {
    color: #666;
    border-left: dotted #ccc;
    padding-left: 1em;
}

.footerwrapper {
    margin: 1em auto;
    padding: 1em 2em;
}

a {
    text-decoration: none;
}

p {
    color: #555;
    line-height: 1.5em;
}

p a:link {
    color: #6595c1;
}

p a:visited{
    color: #6595c1;
}

p a:hover{
    color: #28364b;
    text-decoration: none;
    border-bottom: dotted;
    border-width: 1px;
    background-color: #28364b;
}

p a:active{
    color: #28364b;
    background-color: #f1d4ba;
}

.calloutwrapper{
    padding: 1em;
}

.callouthome {
    background: url("../img/blue_checker_bg.gif") repeat;
    width: 98%;
    margin: 1em auto;
    border-radius: 1em;
}

.calloutblue {
    background: url("../img/blue_checker_bg.gif") repeat;
    width: 98%;
    margin: 1em auto;
    border-radius: 1em;
}

.calloutcta {
    /*insert property for button in values here*/
    margin-top: 1em;
    font-size: 1em;
    letter-spacing: .05em;
    padding: .5em 1em;
    border: 1px solid #ccc;
    background: #ccc linear-gradient(#fff, #ccc);
    border-radius: .25em;
    box-shadow: 0 1px 5px #333;
    color: #28364b;
}

.calloutcta:link{
    color:#28364b;
}

.calloutcta:hover {
    padding: .5em 1em;
    background: #d29128;
    border: none;
    border-radius: .25em;
    box-shadow: none;
    color: #28364b;  
}

.calloutcta:active {
    padding: .5em 1em;
    background: #f1d4ba;
    border-radius: .25em;
    color: #d29128;  
}

.secondarycta {
    /*insert property for button in values here*/
    font-size: .9em;
    letter-spacing: .05em;
    padding: .5em 1.25em;
    /*border: 1px solid #28364b;*/
    background: #28364b linear-gradient(#375a8f, #28364b);
    border-radius: .5em;
    color: #fff;
    box-shadow: 0;
}

.secondarycta:link{
    color: white;
}

.secondarycta:visited{
    color: white;
}

.secondarycta:hover {
    background: #28364b;
    border: none;
}

.secondarycta:active {
    background: #6595c1;
}

.tertiarycta {
    /*insert property for button in values here*/
    font-size: .75em;
    letter-spacing: .05em;
    padding: .5em 1.25em;
    border: 2px solid #28364b;
    background: #fff;
    border-radius: .5em;
    color: #28364b;
    /*box-shadow: 0 1px 5px #ccc;*/
}

.tertiarycta:hover {
    background: #6595c1;
}

.tertiarycta:active {
    background: #d29128;
}

@media screen and (min-width: 640px) {
    #wrapper{
        width: 58.75em;
        margin:auto;
    }

    #page{
        width: 58.75em;
        margin:auto;
    }

    #menutop{
        visibility: hidden;
    }

    #mainnav{
        position: fixed;
        width: 58.75em;
        height: 4em;
        top: -32px;
        border-bottom-left-radius: .5em;
        border-bottom-right-radius: .5em;
    }

    #mainnav ul li {
        display: inline-block;
        text-align: left;
    }

    #mainnav ul{
        float: right;
        padding-right: 2em;
    }

    #mainnav ul li a{
	/*float: left;*/
        height: 1em;
	/*margin-left: .5em;*/
        text-align: center;
	border-radius: .5em;
	border-top: none;
	background-color: #CCC;
	color: #000;
    }


    .logo{
        background: url("../img/positive_deviancy_244x40_rgb_paths.svg");
        background-size: 244px 40px;
        float: left;
        width: 244px;
        height: 40px;
        text-indent: -9999px;
    }

    nav li {
        /*display: inline;*/
        /*padding-left: 2em;*/
        border-top: 0;
    }

    nav li:last-child { 
        border-bottom: 0; 
    }

    h1.tophead{
        padding-top: 1.5em;
    }

    .bluewrapper{
        width: 96%;
        margin: auto;
    }

    .callouthome {
        background: url("../img/blue_checker_bg.gif") repeat;
        width: 31%;
        height: 67em;
        float: left;
        margin-left: 2%;
        border-radius: 1em;
    }

    .logomainnav{
        margin: auto;
        display: block;
        float: left;
        margin-left: 3em;
        margin-top: .75em;
        width: 244px;
        height: 40px;
    }

    .aboutimg {
        margin-top: -3px;
        float: center;
        width: 33%;
    }

    .banner {
        height: 20em;
    }

    footer{
        width: 100%;
        clear: both;
    }

    

}