@charset "UTF-8";

/*small screens (put wdith here) */

.nav-small { display: none; }
.nav-small-btn {display: block; }


body {
    margin-top: 0px;
	font-size: .9em;
}

h1 {line-height: 1em;}
h1      {font-size: 3em; font-weight: normal; font-family: 'Roboto Slab', serif; color: #6aa404; margin: 0 0 .5em 0;}
h2      {font-size: 2em; font-weight: normal; font-family: 'Roboto Slab', serif; color: #fff; margin: 0 0 .2em 0;}
h3      {font-size: 2em; font-weight: normal; font-family: 'Roboto Slab', serif; color: #6aa404; margin: 0 0 .2em 0;}
p       {margin: 0 0 .75em 0;}

a.logo {
    display: block;
    float: none;
    clear: both;
	width: 95%;
    height: 76px;
    margin: 0 auto;
    background: url(../images/logo-small.jpg) center no-repeat ;
 }

header {
    padding-bottom: 0px;
}

.hero {
    width: 100%;
    height: 470px;
    background: url(../images/home-hero-small.gif) center bottom no-repeat;
}

.hero p { margin: 0 30px 20px 30px; }
.hero h1 { margin: 0 20px; }


.nav-small {
    width: 100%;
    padding: 20px 0px 20px 0;
	background: #2aa9d5;
}

.nav-small a {
    display: block;
    width: 80%;
    height: 30px;
    text-align: center;
    font-size: 1.2em;
    background: #FFF;
    color: #097dc7;
    /*border: 1px solid #cccccc;*/
    margin: 20px auto 12px auto;
    padding: 10px 0 10px 0;
    text-decoration: none;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
}

.nav-small a:ACTIVE {background: #043758; }

.nav-small-btn {
    text-align: center;
	color: #FFF;
    font-size: 1.2em;
    text-decoration:  none;
    margin: 0 auto 30px auto;
    padding: 10px 0px;
    width: 40%;
    border-top: none;
	border-bottom-left-radius: 12px;
	-moz-borde-bottom-leftr-radius: 12px; 
    -webkit-border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	-moz-border-bottom-right-radius: 12px; 
    -webkit-border-bottom-right-radius: 12px;
	background: #2aa9d5;
	cursor: pointer;
}

.nav-small-btn:ACTIVE {background: #043758; }


nav {
    display: block;
	width: 95%;
    float: none;
    clear: both;
    text-align: center;
}

nav a {
    display: block;
    width: 95%;
    height: 30px;
    text-align: center;
    font-size: 1.2em;
    border: 1px solid #cccccc;
    margin: 20px 0 20px 20px;
    padding: 10px 0 10px 0;
    text-decoration: none;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
}
.content-top {
    height: 503px;
    background: url(../images/bg-medium.gif) repeat-x;
    padding-top: 30px;
}
.content-about {
    height: 309px;
    margin: 0 0 0 0;
    padding: 200px 30px 0 30px;
    background: url(../images/content-about-medium.png) no-repeat center top;
}

.content-faq {
    height: 309px;
    margin: 0 0 0 0;
    padding: 200px 30px 0 30px;
    background: url(../images/content-faq-medium.png) no-repeat center top;
}

.content-products {
    height: 309px;
    margin: 0 0 0 0;
    padding: 200px 30px 0 30px;
    background: url(../images/content-products-medium.png) no-repeat center top;
}

.content-estimate {
    height: 309px;
    margin: 0 0 0 0;
    padding: 200px 30px 0 30px;
    background: url(../images/content-estimate-medium.png) no-repeat center top;
}

.content-thankyou {
    height: 309px;
    margin: 0 0 0 0;
    padding: 160px 30px 0 30px;
    background: url(../images/content-thankyou.png) no-repeat center top;
}

.content-bottom {
    padding: 0 30px 0 30px;
}

.offset-digital { padding-top: 250px; background: url(../images/products-one.gif) no-repeat center top; }
.repacking { padding-top: 250px; background: url(../images/products-three.gif) no-repeat center top; }
.creative { padding-top: 250px; background: url(../images/products-two.gif) no-repeat center top; }


form input, textarea, select {
    width: 90%;
}

nav { display: none; }