/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* 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;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
html {
font-size: 1em;
line-height: 1.6;
height: 100%;
}
body {
background-color:#fcfbfa;
color:#3e3e3e;
font-family: "museo-sans",sans-serif;
font-weight: 300;
min-height: 100%;
}
a, a:link {
text-decoration:none;
color:#00acc5;
}
h1 {
margin-bottom:2em;
}
h1, h2, h3, h4 {
font-size:1.7em;
font-weight: 200;
line-height: 1.3;
}
p, ul {
margin:0 0 1.8em 0;
}
li {
padding-left: 1.5em;
}
input, textarea {
font-family: "museo-sans",sans-serif;
color:#3e3e3e;
border-radius:none;
}
address {
margin:0 0 1.8em 0;
font-style:normal;
}
blockquote {
margin-left:0;
margin-right:0;
}
.details-page h1,
.details-page h2 {
text-transform:lowercase;
}
.details-page h2 {
margin-bottom:2em;
}
.page-loading {
position:absolute;
left:0;
right:0;
z-index:100;
background-color:#fff;
background-image:url(../img/content/loading_spinner.gif);
background-position:center center;
background-repeat:no-repeat;
width:100%;
height:100%;
}
.no-js .page-loading {
display:none;
}
.intro {
font-size:1.1em;
}
.large-text {
font-size:1.2em;
font-weight: 200;
}
.footer p {
}
.wrap {
max-width:1791px;
margin:0 auto;
clear:both;
}
.wrap2 {
max-width:1004px;
margin:0 auto;
clear:both;
}
.row {
background-color:#fcfbfa;
}
*, input[type="search"] {
box-sizing: border-box;
}
.banner img,
.case-study-thumbs img,
.media-holder img {
width:100%;
height:auto;
max-width:100%;
}
.banner {
padding-bottom: 10px;
}
.banner .wrap {
position:relative;
}
.logo-main {
width:45%;
max-width:828px;
position:absolute;
z-index:2;
top:100px;
}
nav ul {
width:100%;
padding:0;
margin:0;
}
nav li {
float:left;
list-style:none;
}
.main-content {
padding-top: 40px;
padding-bottom: 80px;
}
.main-nav nav ul {
float:right;
width: auto;
margin-right:86px;
}
.main-nav nav li {
font-size:1.6em;
padding-top: 18px;
padding-bottom: 10px;
text-transform:lowercase;
min-height:67px;
font-weight: 200;
}
.main-nav nav li.current,
.main-nav nav li.current a {
color:#f15800;
}
.main-nav nav li a {
color:#3e3e3e;
}
.main-nav nav li {
padding-right:37px;
padding-left:35px;
}
/* ===========
.main-nav nav li:last-child {
border-left:1px solid #f15800;
padding-left:35px;
}
============= */
.main-nav img {
float:left;
}
.filter-dropdown {
font-size:1.3em;
font-weight: 100;
color:#3e3e3e;
text-transform:lowercase;
background-color: white;
}
/* === home === */
.case-study-thumbs li {
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0;
margin:0;
width:12.5%;
}
.case-study-thumbs li a {
display:block;
background-color:#f15800;
}
.case-study-thumbs img {
opacity:0.15;
}
.no-js .case-study-thumbs img {
opacity:1;
}
/* === digital-design 86cedd === */
/* === ux c6bdab === */
/* === brand 95a5a7 === */
/* === illustration 87735b === */
/* === animation ac9883 === */
/* === print bb661f === */
.contact label {
display: none;
}
.lt-ie9 .contact label {
display: block;
text-transform:lowercase;
}
.logo-top {
display: block;
float: left;
width: auto;
}
.footer-container {
position:fixed;
bottom:0;
left:0;
width:100%;
text-align:right;
}
.showFooter {
background-color: #86cedd;
display: inline-block;
color: #FFF;
padding: 3px 40px;
margin-right: 20px;
cursor:pointer;
background-image: url(../img/backgrounds/arrow-1.png);
background-repeat: no-repeat;
background-position: center center;
}
.footer {
background-color:#0c2b2a;
padding: 30px 0px 26px;
display:none;
font-size:0.9em;
text-align: left;
}
.no-js .footer {
display:block;
}
.footer p,
.footer ul {
margin:0;
color:#fff;
line-height:1.1;
}
.footer li {
padding:0 15px;
}
.footer li:first-child {
border-right:1px solid #fff;
padding-left: 0;
}
.footer li:last-child {
margin-right:0;
}
.footer a {
color:#fff;
}
#footer-content h2 {
margin: -0.4em 0 .5em 0;
color: #666;
}
.pinIt {
position:fixed;
left:0;
bottom:0;
width:100%;
}
.col-2 {
float:left;
width:60%;
}
.col-1 {
width:35%;
float:right;
margin-left:5%;
}
.col-3 {
width:80%;
}
.col-4 {
width:50%;
float:left;
}
.col-5 {
width:100%;
clear:both;
}
.col-6 {
width:50%;
float:right;
margin-bottom:20px;
}
.contact ul {
margin:0;
padding:0;
}
.contact li {
margin:0 0 16px 0;
padding:0;
list-style:none;
}
.contact input[type=text],
.contact input[type=email],
textarea {
width:313px;
border:1px solid #d5d2d0;
padding: 10px 8px;
}
textarea {
min-height:120px;
}
input[type=submit] {
border:none;
padding:15px 40px;
font-size: 1.5em;
font-weight: 200;
}
.btn {
color:#fff;
background-color:#f15800;
}
.media-holder {
display:inline-block;
width:auto;
}
.quote-source {
font-style:italic;
}
#form1 {
position:relative;
}
.form-message {
position:absolute;
top:-2em;
left:auto;
color:#093;
}
.next-prev {
position:fixed;
top:50%;
display:inline-block;
}
.next-prev a {
font-size:3.1em;
color:#de6806;
display:inline-block;
min-width:40px;
text-align:center;
}
.next-prev a:hover {
background-color:#eee;
}
.next {
right:20px;
}
.prev {
left:20px;
}
/* ==========================================================================
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;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (max-width: 1170px) {
.next-prev {
display:none;
}
}
@media only screen and (max-width: 1024px) {
.wrap2 {
margin:0 20px;
}
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
.case-study-thumbs li {
width: 25%;
}
.col-3 {
width:100%;
}
.filter-dropdown {
font-size:1em;
}
}
@media only screen and (max-width: 700px) {
ul, ol {
padding: 0 0 0 20px;
}
li {
padding-left: 0;
}
.col-2,
.col-1,
.col-3,
.col-4,
.col-6 {
float:none;
width:100%;
margin-left:0;
margin-right:0;
}
h1,
h2,
.details-page h2 {
margin-bottom:1em;
}
.contact input[type=text],
.contact input[type=email],
textarea {
width:95%;
}
.main-nav nav ul {
margin-right: 0;
}
.main-nav nav {
/*text-align:center;*/
}
.main-nav nav ul {
/*float: none;
margin: 0 auto;
display: inline-block;
width:100%;*/
}
.main-nav nav li {
font-size: 1.2em;
}
.main-nav nav li:first-child {
text-align:right;
}
.main-nav nav li:last-child {
text-align:left;
}
.main-content {
margin-top: 0px;
}
}
@media only screen and (max-width: 600px) {
.main-nav img {
width: 90px;
height: auto;
}
.main-nav nav li {
padding-top: 10px;
padding-bottom: 5px;
min-height: 37px;
font-size:1em;
}
.main-nav nav li:first-child {
padding-right: 10px;
}
.main-nav nav li:last-child {
padding-left: 10px;
}
.main-content {
padding-top: 20px;
}
.footer p {
clear:both;
padding-top:1em;
}
}
@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;
}
}