/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #444;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

body {
    background: #e2e3d5;
    background-image: url('../img/bedge-grunge-bg.png');
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

a {
    text-decoration: none;
}

p a {
    color: #ee2b16;
    text-decoration: underline;
    text-shadow: 1px 1px 2px #828282;
}

p a:hover {
    color: #444;
}

.page-title {
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 2px #828282;
}
#toTop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: 64px;
    height: 64px;
    background-image: url('../image/up.png');
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#toTop:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}


/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Header container
   ========================================================================== */

.header-container {
    margin: 0 auto;
    padding: 0;
    height: 66px;
    border-top: 1px solid #8e8e8e;
    background: #303030; /* Old browsers */
    background: -moz-linear-gradient(top,  #303030 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #303030 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #303030 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #303030 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #303030 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow: 0 5px 10px #aaa;
    -moz-box-shadow: 0 5px 10px #aaa;
    box-shadow: 0 5px 10px #aaa;
}

.wrapper, .footer-container  .wrapper {
    width: 90%;
    margin: 0 5%;
    max-width: 1024px;
}
.clearfix {
    margin: 0 auto;
    padding: 0;
}

/* ==========================================================================
   Footer container
   ========================================================================== */

.footer-container {
    background: #000 url('../img/bk_footer.jpg') repeat-x;
    border-top:1px solid #8e8e8e;
    height: auto;
    padding: 10px;
}

.footer-container .wrapper {
    width: 90%;
    margin: 0 auto;
    max-width: 1024px;
}
.footer-container h3 {
    margin: 0 0 20px 0;
    padding: 0;
    color: #fff;
}
.footer-container img {
    max-width: 340px;
    width:90%;
}
#copyright_tag {
    clear: both;
}
#footer-navigation {
    margin: 0 auto !important;
    padding: 0 !important;
    margin-top: -16px !important;
}
#footer-navigation .nav li {
    display: list-item;
    float: none;
}
#footer-navigation .nav a:link, #footer-navigation .nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 5px 0px;
}
#footer-navigation .nav a:hover, #footer-navigation .nav a:active,
#footer-navigation .nav .active a:link, #footer-navigation .nav .active a:visited {
    color: #ee2b16;
    background-image: none !important;
}
#footer-col1,
#footer-col2,
#footer-col3 {
    width: 330px;
    padding: 0 20px;
    float: left;
}
#footer-col1 h2,
#footer-col2 h2,
#footer-col3 h2 {
    background-image: url('../img/tab-id-bg.png');
    background-repeat: no-repeat;
    width: 300px;
    height: 72px;
    padding: 10px 0 0 20px;
    margin: 0 0 10px -10px;
}
#footer-col1 p,
#footer-col2 p,
#footer-col3 p {
    padding: 0px;
    margin: -10px 0 20px 0;
    line-height: 1.2;
    min-height: 100px;
}

/* ==========================================================================
   Main navigation styles with .sidr FB mobile feature
   ========================================================================== */

#responsive-menu-button {
    color: #fff;
}
.nav ul {
    margin: 0 auto;
    padding: 0;
}
.nav li {
    display: inline;
    font-size: 14px;
    float: left;
}
.nav a:link, nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 19px 20px;
}
.nav a:hover, .nav a:active,
.nav .active a:link, .nav
.active a:visited {
    color: #ee2b16;
    background-image: url('../img/nav-hover-bg.png');
    -webkit-box-shadow: 0 0 9px #111111 inset;
    -moz-box-shadow: 0 0 9px #111111 inset;
    box-shadow: 0 0 9px #111111 inset;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
}

#mobile-header {
    display: none;
    margin: 0 auto;
    padding: 20px 0;
}

.sidr {
    display:none;
    position:absolute;
    position:fixed;
    top:0;
    height:100%;
    z-index:999999;
    width:260px;
    overflow-x:none;
    overflow-y:auto;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    font-size:15px;
    background:#333;
    color:#fff;
    -webkit-box-shadow:inset 0 0 5px 5px #222;
    -moz-box-shadow:inset 0 0 5px 5px #222;
    box-shadow:inset 0 0 5px 5px #222;
}

.sidr .sidr-inner {
    padding:0 0 15px;
}

.sidr .sidr-inner>p {
    margin-left:15px;
    margin-right:15px;
}

.sidr.right {
    left:auto;
    right:-260px;
}

.sidr.left {
    left:-260px;
    right:auto;
}

.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6 {
    font-size:11px;
    font-weight:400;
    padding:0 15px;
    margin:0 0 5px;
    color:#fff;
    line-height:24px;
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#4d4d4d),color-stop(100%,#1a1a1a));
    background-image:-webkit-linear-gradient(#4d4d4d,#1a1a1a);
    background-image:-moz-linear-gradient(#4d4d4d,#1a1a1a);
    background-image:-o-linear-gradient(#4d4d4d,#1a1a1a);
    background-image:linear-gradient(#4d4d4d,#1a1a1a);
    -webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);
    box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);
}

.sidr p {
    font-size:13px;
    margin:0 0 12px;
}

.sidr p a {
    color:rgba(255,255,255,0.9);
}

.sidr>p {
    margin-left:15px;
    margin-right:15px;
}

.sidr ul {
    display:block;
    margin:0 0 15px;
    padding:0;
    border-top:1px solid #1a1a1a;
    border-bottom:1px solid #4d4d4d;
}

.sidr ul li {
    display:block;
    margin:0;
    line-height:48px;
    border-top:1px solid #4d4d4d;
    border-bottom:1px solid #1a1a1a;
}

.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active {
    border-top:none;
    line-height:49px;
}

.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span {
    -webkit-box-shadow:inset 0 0 15px 3px #222;
    -moz-box-shadow:inset 0 0 15px 3px #222;
    box-shadow:inset 0 0 15px 3px #222;
    background-image: url('../img/nav-hover-bg.png');
    color: #ee2b16;
}

.sidr ul li a,.sidr ul li span {
    padding:0 15px;
    display:block;
    text-decoration:none;
    color:#fff;
}

.sidr ul li ul {
    border-bottom:none;
    margin:0;
}

.sidr ul li ul li {
    line-height:40px;
    font-size:13px;
}

.sidr ul li ul li:last-child {
    border-bottom:none;
}

.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active {
    border-top:none;
    line-height:41px;
}

.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span {
    -webkit-box-shadow:inset 0 0 15px 3px #222;
    -moz-box-shadow:inset 0 0 15px 3px #222;
    box-shadow:inset 0 0 15px 3px #222;
}

.sidr ul li ul li a,.sidr ul li ul li span {
    color:rgba(255,255,255,0.8);
    padding-left:30px;
}

.sidr form {
    margin:0 15px;
}

.sidr label {
    font-size:13px;
}

.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select {
    width:100%;
    font-size:13px;
    padding:5px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0 0 10px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    border:none;
    background:rgba(0,0,0,0.1);
    color:rgba(255,255,255,0.6);
    display:block;
    clear:both;
}

.sidr input[type=checkbox] {
    width:auto;
    display:inline;
    clear:none;
}

.sidr input[type=button],.sidr input[type=submit] {
    color:#333;
    background:#fff;
}

.sidr input[type=button]:hover,.sidr input[type=submit]:hover {
    background:rgba(255,255,255,0.9);
}

/* ==========================================================================
   Logo styles
   ========================================================================== */

#main-container {
    width: 90%;
    margin: 0 5%;
    height: auto;
    padding-bottom: 30px;
}

#logo {
    text-align: center;
    margin:0;
    padding: 10px 0 20px 0;
}

#logo p {
    margin: 0;
    padding: 0;
}

.divider {
    width: 100%;
}

/* ==========================================================================
   Home Page
   ========================================================================== */
#intro {
    display: inline-block;
    width: 100%;
}

#intro h1 {
    color: #f45140;
    font-size: 4em;
    text-shadow: 1px 1px 2px #828282;
    filter: dropshadow(color=#828282, offx=1, offy=1);
    margin: 0;
}

#intro p img {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

#inspiration_img {
    display: block;
    margin: 0 auto;
    max-width: 653px;
    width: 100%;
}

.headline {
    width: 100%;
    padding: 0;
    float: left;
    font-size: 1.75em;
}

#logos-branding,
#web-design,
#print-design {
    width: 330px;
    padding: 0 20px;
    float: left;
}
#logos-branding h2,
#web-design h2,
#print-design h2 {
    background-image: url('../img/tab-id-bg.png');
    background-repeat: no-repeat;
    width: 300px;
    height: 72px;
    padding: 10px 0 0 20px;
    margin: 0 0 10px -10px;
}
#logos-branding p,
#web-design p,
#print-design p {
    padding: 0px;
    margin: -10px 0 20px 0;
    line-height: 1.2;
    min-height: 100px;
}

/* ==========================================================================
   Work Page
   ========================================================================== */
.page-title h2 {
    margin: 0 0 10px 0;
    padding: 0;
    text-shadow: none;
}
#planning,
#design,
#luanch {
    width: 330px;
    padding: 0 20px;
    float: left;
}
#planning h3,
#design h3,
#luanch h3 {
    background-image: url('../img/tab-id-bg.png');
    background-repeat: no-repeat;
    width: 300px;
    height: 72px;
    padding: 10px 0 0 20px;
    margin: 0 0 10px -10px;
}
#planning p,
#design p,
#luanch p {
    padding: 0px;
    margin: -10px 0 20px 0;
    line-height: 1.2;
    min-height: 100px;
}

/* --- gallery --- */

.gallery {
    width: 100%;
    margin: 0 auto;
    clear: both;
}

.gallery .sorting {
    margin: 0 0 15px 0;
    border: 1px solid #6d4d2e;
    background-color: rgba(109, 77, 46, .3);
}

.gallery .sorting span {
    padding: 0 20px 0 0;
    font-weight: bold;
    font-style: italic;
}

.gallery .sorting div {
    margin: 10px 0 10px 10px;
}

.gallery .sorting a {
    color: #fff;
    font-size: .85em;
    text-decoration: underline;
    text-transform: uppercase;
    padding: 3px 10px;
    background: url('../images/check_normal.gif') no-repeat 0px 3px;
}

.gallery .sorting a:hover {
    color: #ee2b16;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
}

.gallery .sorting a.selected {
    color: #ee2b16;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
}

.gallery .photos .thumbnail_container {
    position: relative;
}

.gallery .photos .thumbnail_container a.thumbnail {
    position: absolute;
}

.gallery .photos .thumbnail_container a.thumbnail img {
    width: 105px;
    height: 105px;
    border: 1px solid #6d4d2e;
}

.gallery .photos .thumbnail_container a.thumbnail img:hover {
    border: 3px solid #ee2b16;
}

.clear_both {
    clear: both;
}

.touch .fancybox-nav span {
    visibility: visible!important;
}

/* ==========================================================================
   Services Page
   ========================================================================== */

#logo-services,
#web-services,
#print-services {
    width: 100%;
    padding: 0 5px 10px 5px;
    float: left;
}

.workflow {
    display: block;
    clear: both;
}

.bold_tag {
    color: #f45140;
    font-size: 1.5em;
    text-shadow: 1px 1px 2px #828282;
    filter: dropshadow(color=#828282, offx=1, offy=1);
}

#logo-services h1,
#web-services h1,
#print-services h1 {
    text-align: left;
    float: left;
    margin: 0 0 20px 0;
    line-height: 1.5em;
}

#logo-services h2,
#web-services h2,
#print-services h2 {
    background-image: url('../img/tab-id-bg.png');
    background-repeat: no-repeat;
    width: 300px;
    height: 72px;
    padding: 10px 0 0 20px;
    margin: 0 0 0px -10px;
}
#logo-services p,
#web-services p,
#print-services p {
    padding: 0px;
    margin: -10px 0 20px 0;
    line-height: 1.2;
    min-height: 100px;
    clear: both;
}

/* ==========================================================================
   Pricing Page
   ========================================================================== */

#price-panel {
    width: 100%;
    padding: 40px;
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;

}

.price-col {
    width: 300px;
    float: left;
    margin-bottom: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    line-height: normal !important;
}

.price-col:last-child {
    margin-bottom: 0;
}

.price-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.price-col ul  li{
    margin: 0;
    padding: 0;
    list-style: none;
}

#price-panel h1,
#price-panel h2,
#price-panel h3 {
    margin: 0px;
    font-weight: normal !important;
    border: 0 !important;
    line-height: normal !important;
}

#price-panel h1 {
    font-size: 3em;
    padding: 30px !important;
    border-top: 1px solid #ffec4a;
    border-bottom: 1px solid #ea8c00;
    background-color: #fcbb00;
    background-image: linear-gradient(top, #fbd601, #fdb200);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbd601', endColorstr='#fdb200');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbd601', endColorstr='#fdb200');
    background: -ms-linear-gradient(top, #fbd601, #fdb200);
    background: -moz-linear-gradient(top, #fbd601, #fdb200);
    background: -o-linear-gradient(top, #fbd601, #fdb200);
    background: -webkit-linear-gradient(top, #fbd601, #fdb200);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbd601), color-stop(1, #fdb200));
}

#price-panel h2 {
    font-size: 1.5em;
}

.price-col h2.col1 {
    color: #da4300;
    text-shadow: 0px 1px 0px #ffdd28;
}

.price-col li.header_row_1 {
    height: 46px;
    width: 100%;
    padding: 10px 5px !important;
    border-top: 1px solid #ffe96d;
    border-bottom: 1px solid #ff8e00;
    background-color: #fcbb00;
    background-image: linear-gradient(top, #fbd601, #fdae00);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbd601', endColorstr='#fdae00');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbd601', endColorstr='#fdae00');
    background: -ms-linear-gradient(top, #fbd601, #fdae00);
    background: -moz-linear-gradient(top, #fbd601, #fdae00);
    background: -o-linear-gradient(top, #fbd601, #fdae00);
    background: -webkit-linear-gradient(top, #fbd601, #fdae00);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbd601), color-stop(1, #fdae00));
}

.price-col h1.col1 {
    color: #da4300;
    text-shadow: 0px 1px 0px #ffdd28;
}

#price-panel li.row_style_1, #price-panel li.row_style_2, #price-panel li.row_style_3, #price-panel li.row_style_4 {
    width: 100%;
    height: 100%;
    min-height: 26px;
    padding: 8px !important;
    float: left;
}

#price-panel li.row_style_1 {
    background-color: #ffffff;
    height: auto;
}

#price-panel li.row_style_3 {
    background-color: #ebebeb;
    height: auto;
}

#price-panel li.footer_row {
    width: 100%;
    height: 55px;
    padding: 14px 6px !important;
    float: left;
    border-top: 1px solid #d3d3d3;
    background-color: #e2e2e2;
    background-image: linear-gradient(top, #f6f6f6, #d0d0d0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#d0d0d0');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#d0d0d0');
    background: -ms-linear-gradient(top, #f6f6f6, #d0d0d0);
    background: -moz-linear-gradient(top, #f6f6f6, #d0d0d0);
    background: -o-linear-gradient(top, #f6f6f6, #d0d0d0);
    background: -webkit-linear-gradient(top, #f6f6f6, #d0d0d0);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f6f6f6), color-stop(1, #d0d0d0));
}

/* --- button --- */
#price-panel a.sign_up {
    width: 120px;
    height: 24px;
    color: #da4300;
    padding: 3px 0px 0px 0px !important;
    display: block;
    text-align: center;
    margin: 0 auto;
    text-shadow: 0px 1px 0px #ffffff; /* text shadow for firefox 3.6+ */
    border: 1px solid #b5b5b5;
    background-color: #d8d8d8; /* background color for non-css3 browsers */
    outline: none;
    /* gradient */
    background-image: linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d8d8d8'); /* IE5.5 - 7 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d8d8d8'); /* IE8 */
    background: -ms-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* IE9 */
    background: -moz-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* Firefox */
    background: -o-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* Opera 11  */
    background: -webkit-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.05, #efefef), color-stop(1, #d8d8d8)); /* Chrome 10, Safari */
    /* shadow */
    box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    /* font */
    font-weight: bold;
}

/* --- button hover --- */
#price-panel a.sign_up:hover {
    height: 24px;
    color: #444444;
    padding: 3px 0px 0px 0px !important;
    text-shadow: 0px 1px 0px #ffffff; /* text shadow for firefox 3.6+ */
    border: 1px solid #b5b5b5;
    background-color: #c9c9c9; /* background color for non-css3 browsers */
    outline: none;
    /* gradient */
    background-image: linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c9c9c9'); /* IE5.5 - 7 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c9c9c9'); /* IE8 */
    background: -ms-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* IE9 */
    background: -moz-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* Firefox */
    background: -o-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* Opera 11  */
    background: -webkit-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d2d2d2), color-stop(0.05, #dedede), color-stop(1, #c9c9c9)); /* Chrome 10, Safari */
    /* shadow */
    box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
}

/* ========== COLUMN HOVERS ========== */
.price-col {
    /* transitions */
    -webkit-transition: box-shadow 0.25s ease;
    -moz-transition: box-shadow 0.25s ease;
    -o-transition: box-shadow 0.25s ease;
    -ms-transition: box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
}

.price-col:hover {
    position: relative;
    z-index: 100;
    left: -5px;
    top: -15px;
    /* shadow */
    box-shadow: 5px 0px 30px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 0px 30px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 0px 30px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Contact Page
   ========================================================================== */
#form_container {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.form_section {
    width: 50%;
    float: left;
    margin: 0;
    padding: 5px;
    list-style: none;
}

.form_section input,
.form_section textarea {
    width: 100%;
    height: 28px;
}
#form_message {
    height: 128px;
}

#name,
#phone,
#email,
#website,
#budget {
    height: 28px;
}


.checkbox, #required_needs_0,
.checkbox, #required_needs_1,
.checkbox, #required_needs_2 {
    margin: 0;
    padding: 0;
    float: left;
    width: 22px;
    height: 22px;
}

#submit_buttons button {
    padding: 10px;
    color: #da4300;
    display: block;
    text-align: center;
    text-shadow: 0px 1px 0px #ffffff; /* text shadow for firefox 3.6+ */
    border: 1px solid #b5b5b5;
    background-color: #d8d8d8; /* background color for non-css3 browsers */
    outline: none;
    /* gradient */
    background-image: linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d8d8d8'); /* IE5.5 - 7 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d8d8d8'); /* IE8 */
    background: -ms-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* IE9 */
    background: -moz-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* Firefox */
    background: -o-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* Opera 11  */
    background: -webkit-linear-gradient(top, #ffffff, #efefef 1px, #d8d8d8); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.05, #efefef), color-stop(1, #d8d8d8)); /* Chrome 10, Safari */
    /* shadow */
    box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    /* font */
    font-weight: bold;
    clear: both;
}

#submit_buttons button:hover {
    color: #444444;
    text-shadow: 0px 1px 0px #ffffff; /* text shadow for firefox 3.6+ */
    border: 1px solid #b5b5b5;
    background-color: #c9c9c9; /* background color for non-css3 browsers */
    outline: none;
    /* gradient */
    background-image: linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c9c9c9'); /* IE5.5 - 7 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#c9c9c9'); /* IE8 */
    background: -ms-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* IE9 */
    background: -moz-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* Firefox */
    background: -o-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* Opera 11  */
    background: -webkit-linear-gradient(top, #d2d2d2, #dedede 1px, #c9c9c9); /* Chrome 11  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d2d2d2), color-stop(0.05, #dedede), color-stop(1, #c9c9c9)); /* Chrome 10, Safari */
    /* shadow */
    box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.5);
}

.warning {
    color: red !important;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Gallery Queries
   ========================================================================== */
/* Vertical */
@media screen and (min-height: 50px) and (max-height: 520px){

}

@media screen and (min-height: 521px) and (max-height: 700px){

}

@media screen and (min-height: 701px){

}

/* Horizontal */
@media screen and (min-width: 50px) and (max-width: 500px){

    .gallery {
        width: auto;
    }
    .gallery .sorting span {
        display: block;
        padding: 0 0 20px 0;
    }
    .gallery .sorting a {
        display: block;
    }
    .responsive-slider-parallax {
        display: none;
    }
}

@media screen and (min-width: 501px) and (max-width: 960px){

    .gallery .sorting {
        overflow: hidden;
    }
    .gallery .sorting span {
        display: block;
        padding: 0 0 20px 0;
    }
    .gallery .sorting a {
        display: block;
        float: left;
        margin-bottom: 5px;
    }
}
/* END Gallery Queries */
/* iPad in portrait for price cols */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    .price-col {
        max-width: 190px!important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    #logos-branding,
    #web-design,
    #print-design,
    #planning,
    #design,
    #luanch {
        width: 95%;
        padding: 0;
    }
    #footer-col1,
    #footer-col2,
    #footer-col3 {
        width: 300px !important;
        padding: 0;
    }
    #planning p, #design p, #luanch p,
    #logos-branding p, #web-design p, #print-design p {
        min-height: 0;
    }
    #price-panel {
        padding: 35px 25px 25px 25px;
    }
    .price-col {
        max-width: 250px;
    }
    #intro h1 {
        font-size: 2.5em;
    }
        /* ========== COLUMN HOVERS ========== */
    .price-col {
        /* transitions */
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

    .price-col:hover {
        position: relative;
        z-index: 100;
        left: 0;
        top: 0;
        /* shadow */
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }
}

/* ==========================================================================
   Sidr Queries
   ========================================================================== */

@media only screen and (max-width: 767px){
    body {
        width: 100%;
    }
    #logo p {
        font-size: .85em;
    }
    #mobile-header {
        display: block;
    }
    #navigation {
        display: none;
    }
    #logos-branding,
    #web-design,
    #print-design,
    #planning,
    #design,
    #luanch,
    #logo-services,
    #web-services,
    #print-services,
    #footer-col1,
    #footer-col2,
    #footer-col3 {
        width: 95%;
        padding: 0;
    }
    .form_section {
        width: 100%;
    }
    #price-panel {
        padding: 35px 25px 25px 25px;
    }
    .price-col {
        width: 200px;
    }
    #needs_list li {
        margin: 0;
        padding: 0 5px 10px 0 !important;
    }
    .checkbox, #required_needs_0,
    .checkbox, #required_needs_1,
    .checkbox, #required_needs_2 {
        margin: 0 5px 0 0 !important;
        padding: 0;
    }
    #logo-services h1,
    #web-services h1,
    #print-services h1,
    .web-services h1,
    .headline {
        font-size: 1.5em;
        line-height: 1.2;
    }
    #intro h1 {
        font-size: 2em;
    }
        /* ========== COLUMN HOVERS ========== */
    .price-col {
        /* transitions */
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

    .price-col:hover {
        position: relative;
        z-index: 100;
        left: 0;
        top: 0;
        /* shadow */
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}