* { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { position: relative; float: left; width: 100%; height: 100%; margin: 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 22px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; color: #90949a; background-color: #181d26; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a { outline: none; } a:link { font-family: 'Barlow', sans-serif; font-weight: normal; text-decoration: none; color: #c00; } a:visited { font-family: 'Barlow', sans-serif; font-weight: normal; text-decoration: none; color: #90949a; } a:hover { font-family: 'Barlow', sans-serif; font-weight: normal; text-decoration: none; color: #fff; } a:active { font-family: 'Barlow', sans-serif; font-weight: normal; text-decoration: none; color: #fff; } h1 { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 175%; line-height: 150%; font-weight: 400; text-align: left; letter-spacing: -1px; color: #70747c; } h2 { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 150%; line-height: 125%; font-weight: 400; text-align: left; letter-spacing: -1px; color: #70747c; } h3 { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 150%; line-height: 125%; font-weight: 400; text-align: left; letter-spacing: -1px; color: #c33; } h4 { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 15px 0px 0px 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 100%; font-weight: 400; text-align: left; letter-spacing: 0px; color: #c0c4cc; } h5 { display: table-cell; vertical-align: middle; margin: 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 125%; line-height: 100%; font-weight: 700; text-align: center; letter-spacing: 15px; text-transform: uppercase; color: #90949c; } p { position: relative; float: left; width: auto; height: auto; margin: 10px 0px 10px 0px; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 125%; font-weight: 400; text-decoration: none; text-align: left; color: #90949a; } p a:link { color: #c33; } p a:visited { color: #c33; } p a:hover { color: #fff; } p a:active { color: #fff; } img { position: relative; float: left; width: 100%; height: 100%; text-align: center; } .spacer { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 10px 0px 10px 0px; padding: 0px; } /********************** Begin Container Styles **********************/ .container { position: relative; float: left; width: 100%; height: 100%; min-height: 100%; height: auto !important; margin: 0px auto -145px auto; padding: 0px; } .content { position: relative; float: left; clear: both; width: 100%; height: auto; margin: auto; padding: 0px; } /********************** End Container Styles **********************/ /********************** Begin Footer Style **********************/ .footer { position: relative; float: left; width: 100%; height: 65px; margin: 0px; padding: 25px; font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 100%; font-weight: 400; text-decoration: none; text-align: center; color: #828486; background-color: #14181f; } .footer-offset { position: relative; float: left; clear: both; width: 100%; height: 145px; margin: auto; padding: 0px; } /********************** End Footer Style **********************/ /********************** Begin Social Media Style **********************/ .social-media { position: relative; float: left; clear: both; width: 100%; height: 80px; margin: 0px; padding: 25px; text-align: center; } .social { position: relative; float: none; display: inline-block; width: 30px; height: 30px; margin: 0px 3px 0px 3px; padding: 0px; text-align: center; opacity: 0.5; cursor: pointer; } .affiliate-networks { position: relative; float: left; clear: both; width: 100%; height: 90px; margin: 0px; padding: 25px; text-align: center; } .affiliates { position: relative; float: none; display: inline-block; width: auto; height: 40px; margin: 0px 3px 0px 3px; padding: 0px; text-align: center; opacity: 0.5; cursor: pointer; } /********************** End Social Media Style **********************/ .title { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 0px 0px 25px 0px; padding: 0px 0px 5px 0px; font-family: 'Barlow', sans-serif; font-size: 150%; line-height: 100%; font-weight: 400; text-align: left; letter-spacing: 0px; text-transform: uppercase; color: #c33; } /********************** Begin Header Styles **********************/ .header { position: relative; float: left; width: 100%; height: auto; margin: 50px auto 50px auto; padding: 0px; } .logo { position: relative; float: left; width: 75px; height: 75px; margin: auto 25px auto 0px; padding: 0px; background-image:url('../graphics/sbw-architects.svg'); background-attachment: scroll; background-repeat: no-repeat; background-size: 75px 75px; background-position: top left; } .logotype { position: relative; float: left; width: auto; height: auto; margin: auto; padding: 0px; font-family: 'Michroma', sans-serif; font-size: 150%; line-height: 300%; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; letter-spacing: 0px; color: #fff; } /********************** End Header Styles **********************/ /********************** Begin Menu Styles **********************/ .menu { position: relative; z-index: 100; float: left; width: 100%; height: auto; margin: 0px; padding: 0px; } .menu-item { position: relative; float: none; clear: both; width: auto; height: auto; margin: auto; padding: 5px 0px 5px 0px; } .menu-item a:link { font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 100%; font-weight: 400; font-style: normal; text-decoration: none; text-transform: uppercase; text-align: left; letter-spacing: 0px; color: #fff; } .menu-item a:link { color: #c33; } .menu-item a:visited { color: #c33; } .menu-item a:hover { color: #fff; } .menu-item a:active { color: #fff; } .underscore { position: absolute; float: left; clear: both; width: 0%; height: 1px; margin: 5px 0px 0px 0px; padding: 0px; background-color: #fff; } /********************** End Menu Styles **********************/ /********************** Begin Submenu Styles **********************/ .submenu { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 5px 0px 5px 0px; padding: 0px; } .submenu-item { position: relative; float: left; clear: both; width: auto; height: auto; margin: auto; padding: 0px; } .submenu-item a:link { font-family: 'Barlow', sans-serif; font-size: 75%; line-height: 75%; font-weight: 400; font-style: normal; text-decoration: none; text-align: left; text-transform: uppercase; letter-spacing: 0px; color: #fff; } .submenu-item a:link { color: #fff;} .submenu-item a:visited { color: #fff; } .submenu-item a:hover { color: #c33; } .submenu-item a:active { color: #c33; } #company-submenu { display: none; } #projects-submenu { display: none; } /********************** End Submenu Styles **********************/ /********************** Begin Mobile Menu Styles **********************/ .mobile-menu { position: absolute; z-index: 500; display: none; top: 25px; right: 25px; width: 25px; height: 25px; margin: 0px; padding: 0px; background-image:url('../graphics/menu.svg'); background-attachment: scroll; background-repeat: no-repeat; background-size: 25px 25px; background-position: center; cursor: pointer; } /********************** End Mobile Menu Styles **********************/ /********************** Begin Bullets Style **********************/ .bullets { position: relative; float: left; width: 100%; height: auto; margin: 0px auto 25px auto; padding: 0px; text-align: center; } .bullet { position: relative; float: none; display: inline; width: auto; height: auto; margin: auto; padding: 0px 10px 0px 10px; text-align: center; font-size: 300%; } .bullet.selected a:link {color: #fff; } .bullet.selected a:visited {color: #c00; } .bullet.selected a:hover {color: #fff; } .bullet.selected a:active {color: #fff; } /********************** End Bullets Style **********************/ /********************** Begin Item Style **********************/ .item { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 25px 0px 25px; padding: 0px; } .item img { position: relative; float: left; display: block; width: 100%; height: auto; margin: 0px; padding: 0px; opacity: 0.0; } /********************** End Item Style **********************/ /********************** Begin Next & Previous Style **********************/ .next { position: absolute; float: right; z-index: 100; top: 0px; right: 0px; width: 100px; height: 100%; margin: 0px; padding: 0px; background-image: url("../graphics/next.gif"); background-size: 31px 31px; background-repeat: no-repeat; background-position: center right; cursor: pointer; } .previous { position: absolute; float: left; z-index: 100; top: 0px; left: 0px; width: 100px; height: 100%; margin: 0px; padding: 0px; background-image: url("../graphics/previous.gif"); background-size: 31px 31px; background-repeat: no-repeat; background-position: center left; cursor: pointer; } /********************** End Next & Previous Style **********************/ /********************** Begin Row Style **********************/ .row { /* Sets viewport width */ position: relative; float: none; clear: both; width: 100%; max-width: 1024px; height: auto; margin: auto; padding: 0px 50px 0px 50px; } /********************** End Row Style **********************/ /********************** Begin One-Column Row Style **********************/ .row-1col { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 50px auto 50px auto; padding: 0px; } /********************** End Four-Column Row Style **********************/ /********************** Begin Two-Column Row Style **********************/ .row-2col:nth-of-type(n) { position: relative; float: left; width: 48%; height: auto; margin: 0px 4% 4% 0px; padding: 0px; } .row-2col:nth-of-type(2n) { position: relative; float: left; width: 48%; height: auto; margin: 0px 0px 4% 0px; padding: 0px; } .row-2col-aside:nth-of-type(1) { position: relative; float: left; width: 20%; height: 100%; margin: 0px 5% 50px 0px; padding: 0px; } .row-2col-aside:nth-of-type(2) { position: relative; float: left; width: 75%; height: auto; margin: 0px 0px 50px 0px; padding: 0px; } .row-2col-ul:nth-of-type(1) { position: relative; float: left; width: 48%; height: auto; margin: 0px 4% 0px 0px; padding: 0px; } .row-2col-ul:nth-of-type(2) { position: relative; float: left; width: 48%; height: auto; margin: 0px 0px 0px 0px; padding: 0px; } /********************** End Two-Column Row Style **********************/ /********************** Begin Three-Column Row Style **********************/ .row-3col:nth-of-type(n) { position: relative; float: left; width: 30%; height: auto; margin: 50px 5% 0px 0px; padding: 0px; } .row-3col:nth-of-type(3n) { position: relative; float: left; width: 30%; height: auto; margin: auto; margin: 50px 0% 0px 0px; padding: 0px; } .row-2col-people:nth-of-type(n) { position: relative; float: left; width: 46%; height: auto; margin: 50px 8% 50px 0px; padding: 0px; } .row-2col-people:nth-of-type(2n) { position: relative; float: left; width: 46%; height: auto; margin: auto; margin: 50px 0% 50px 0px; padding: 0px; } /********************** End Three-Column Row Style **********************/ /********************** Begin Four-Column Row Style **********************/ .row-4col:nth-of-type(n) { position: relative; float: left; width: 25%; height: auto; margin: 0%; padding: 0px 20px 0px 20px; } .row-4col:nth-of-type(4n) { position: relative; float: left; width: 25%; height: auto; margin: 0%; padding: 0px 20px 0px 20px; } /********************** End Four-Column Row Style **********************/ /********************** Begin Five-Column Row Style **********************/ .showcase { position: relative; float: none; clear: both; width: 100%; max-width: 1400px; height: 100%; margin: 50px auto 50px auto; padding: 0px; background-color: #242830; } /*.showcase img { transition: transform .2s; }*/ /*.showcase img:hover { transform: scale(1.25); }*/ .mantra { position: relative; float: left; display: table; width: 60%; height: auto; min-height: 1px; text-align: center; background-color: #242830; } .row-5col:nth-of-type(n) { position: relative; float: left; display: table; width: 20%; height: auto; min-height: 1px; margin: 0px; padding: 0px; overflow: hidden; } /********************** End Five-Column Row Style **********************/ /********************** Begin Unordered List Style **********************/ ul { position: relative; float: left; clear: both; width: auto; height: auto; margin: 5px auto 15px auto; padding: 0px; font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 125%; font-weight: 400; text-indent: 0px; color: #90949a; list-style-type: none; } /********************** End Unordered List Style **********************/ .overlay { position: absolute; z-index: 50; display: table; float: left; width: 100%; height: 100%; margin: 0%; padding: 0px; background-color: #c33; opacity: 0; } .overlay p { display: table-cell; vertical-align: middle; font-family: 'Barlow', sans-serif; font-size: 75%; line-height: 100%; font-weight: 700; text-decoration: none; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0px; margin: auto; padding: 0%; } .inset { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 0px; padding: 5px 0px 15px 0px; border-bottom: 1px solid #36383f; } .inset h4 { font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 100%; font-weight: normal; text-align: left; letter-spacing: 0px; color: #c0c4cc; } .inset p { font-family: 'Barlow', sans-serif; font-size: 90%; line-height: 125%; font-weight: normal; text-align: left; letter-spacing: 0px; color: #90949a; margin: 0px; padding: 0px; } .news { position: relative; float: left; width: 100%; height: auto; margin: 0px; padding: 0px; border-top: 1px solid #36383f; } .headline { position: relative; float: left; width: 60%; height: auto; margin: 0px; padding: 25px 0px 25px 0px; font-family: 'Barlow', sans-serif; font-size: 115%; line-height: 125%; font-weight: normal; text-align: left; letter-spacing: 0px; color: #90949a; } .headline a:link { color: #90949a;} .headline a:visited { color: #90949a; } .headline a:hover { color: #c33; } .headline a:active { color: #c33; } .selected a:link { color: #c33; } .date { position: relative; float: left; width: 40%; height: auto; margin: 0px; padding: 25px 0px 25px 0px; font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 125%; font-weight: normal; text-align: right; letter-spacing: 0px; color: #70747a; } .article { position: relative; float: left; display: none; width: 100%; height: auto; margin: 0px; padding: 0px; } .news p { position: relative; float: left; width: 100%; height: auto; margin: 0px; padding: 25px 0px 25px 0px; font-family: 'Barlow', sans-serif; font-size: 100%; line-height: 125%; font-weight: normal; text-align: left; letter-spacing: 0px; color: #90949a; } /********************** Begin Personnel Style **********************/ .personnel { position: relative; float: left; clear: both; width: 100%; height: auto; margin: 0px auto 50px auto; padding: 0px; } .personnel p { margin: 5px auto 5px auto; padding: 0px; } #donn-bohde { display: none; } #darryl-brill { display: none; } #michelle-paul { display: none; } /********************** End Personnel Style **********************/ /* L */ @media only screen and (max-width: 1024px) { } /* M */ @media only screen and (max-width: 768px) { .row { padding: 0px 25px 0px 25px; } h1, h2 { font-size: 135%; letter-spacing: -1px; } h3 { font-size: 115%; letter-spacing: 0px; } h5 { font-size: 85%; letter-spacing: 10px; } p { font-size: 90%; } .row-1col { margin: 50px auto 50px auto; } .row-2col-ul:nth-of-type(n) { clear: both; width: 100%; margin: 0px; } .row-3col:nth-of-type(n) { width: 46%; margin: 50px 8% 25px 0px; } .row-3col:nth-of-type(2n) { width: 46%; margin: 50px 0px 0px 0px; } .row-3col-people:nth-of-type(n) { margin: 0px 5% 50px 0px; } .row-3col-people:nth-of-type(3n) { margin: 0px 0% 50px 0px; } .inset h4 { font-size: 85%; } .inset p { font-size: 85%; } ul { font-size: 85%; } .news h3 { font-size: 100%; } } /* S */ @media only screen and (max-width: 480px) { .header { margin: 75px auto 50px auto; } .logo { margin: auto 15px auto 0px; padding: 0px; width: 50px; height: 50px; background-image:url('../graphics/sbw-architects.svg'); background-attachment: scroll; background-repeat: no-repeat; background-size: 50px 50px; background-position: top left; } .logotype { font-size: 100%; margin: 0px; padding: 0px; } .mobile-menu { display: block; } .menu { position: absolute; z-index: 100; float: left; right: -50%; width: 50%; height: 100%; margin: 0px; padding: 100px 0px 0px 25px; background-color: #181d26; } h1, h2 { font-size: 100%; letter-spacing: 0px; text-align: left; } h3 { font-size: 100%; letter-spacing: 0px; } h5 { font-size: 70%; letter-spacing: 4px; } p { font-size: 80%; } .row-2col:nth-of-type(n) { clear: both; width: 100%; margin: 25px 0px 25px 0px; } .row-2col-aside:nth-of-type(1) { display: none; } .row-2col-aside:nth-of-type(2) { width: 100%; } .row-3col:nth-of-type(n) { clear: both; width: 100%; margin: 25px 0px 25px 0px; } .showcase { margin: 25px auto 50px auto; } .mantra { position: relative; float: left; display: table; width: 66.66%; height: auto; min-height: 1px; text-align: center; } .row-5col:nth-of-type(n) { width: 33.33%; } .inset h4 { font-size: 75%; } .inset p { font-size: 75%; } .news h3 { font-size: 90%; } .date { font-size: 90%; } .news p { font-size: 85%; } ul { font-size: 85%; } .footer { font-size: 85%; } }