.container_12 { margin-left: auto; margin-right: auto; width: 960px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; } .push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11, .push_12, .pull_12 { position:relative; } .alpha { margin-left: 0; } .omega { margin-right: 0; } .container_12 .grid_1 { width:60px; } .container_12 .grid_2 { width:140px; } .container_12 .grid_3 { width:220px; } .container_12 .grid_4 { width:300px; } .container_12 .grid_5 { width:380px; } .container_12 .grid_6 { width:460px; } .container_12 .grid_7 { width:540px; } .container_12 .grid_8 { width:620px; } .container_12 .grid_9 { width:700px; } .container_12 .grid_10 { width:780px; } .container_12 .grid_11 { width:860px; } .container_12 .grid_12 { width:940px; } .container_12 .prefix_1 { padding-left:80px; } .container_12 .prefix_2 { padding-left:160px; } .container_12 .prefix_3 { padding-left:240px; } .container_12 .prefix_4 { padding-left:320px; } .container_12 .prefix_5 { padding-left:400px; } .container_12 .prefix_6 { padding-left:480px; } .container_12 .prefix_7 { padding-left:560px; } .container_12 .prefix_8 { padding-left:640px; } .container_12 .prefix_9 { padding-left:720px; } .container_12 .prefix_10 { padding-left:800px; } .container_12 .prefix_11 { padding-left:880px; } .container_12 .suffix_1 { padding-right:80px; } .container_12 .suffix_2 { padding-right:160px; } .container_12 .suffix_3 { padding-right:240px; } .container_12 .suffix_4 { padding-right:320px; } .container_12 .suffix_5 { padding-right:400px; } .container_12 .suffix_6 { padding-right:480px; } .container_12 .suffix_7 { padding-right:560px; } .container_12 .suffix_8 { padding-right:640px; } .container_12 .suffix_9 { padding-right:720px; } .container_12 .suffix_10 { padding-right:800px; } .container_12 .suffix_11 { padding-right:880px; } .container_12 .push_1 { left:80px; } .container_12 .push_2 { left:160px; } .container_12 .push_3 { left:240px; } .container_12 .push_4 { left:320px; } .container_12 .push_5 { left:400px; } .container_12 .push_6 { left:480px; } .container_12 .push_7 { left:560px; } .container_12 .push_8 { left:640px; } .container_12 .push_9 { left:720px; } .container_12 .push_10 { left:800px; } .container_12 .push_11 { left:880px; } .container_12 .pull_1 { left:-80px; } .container_12 .pull_2 { left:-160px; } .container_12 .pull_3 { left:-240px; } .container_12 .pull_4 { left:-320px; } .container_12 .pull_5 { left:-400px; } .container_12 .pull_6 { left:-480px; } .container_12 .pull_7 { left:-560px; } .container_12 .pull_8 { left:-640px; } .container_12 .pull_9 { left:-720px; } .container_12 .pull_10 { left:-800px; } .container_12 .pull_11 { left:-880px; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: minmax(100px, auto); } .wrapper > div { border: 2px solid rgb(233 171 88); border-radius: 5px; background-color: rgba(233 171 88 / 0.5); padding: 1em; color: #d9480f; } .one { grid-column: 1; grid-row: 1; } .two { grid-column: 2; grid-row: 1; }body { font-family: 'Open Sans', sans-serif; color: #4f4f4f; margin: 0; padding: 0; background-color: #fff; font-size: 14px; line-height: 22px; font-weight: 400; } .clear { clear: both; } .container { color: #fff; padding: 20px 0 20px 0; } .container.white { background-color: #fff; color: #2c2c2c; } .container.light-grey .see-more, .container.light-grey { background-color: #e2e2e2; color: #2c2c2c; } .container.white, .container.white .see-more { color: #2c2c2c; } .container.white .see-more, .container.light-grey .see-more { background-image: url(images/dist/eye-grey.png); } .container.white .see-more.open, .container.light-grey .see-more.open { background-image: url(images/dist/close-grey.png) !important; } .container.dark-grey { background-color: #2c2c2c; } .container.blue { background-color: #195791; } img.chevron { margin: 0 0 -7px 0; padding: 0; width: 100%; clear: both; height: 50px; } .section-header { text-align: center; } .section-header img { margin: 20px 0 10px 0; } .section-header p { font-size: 20px; line-height: 31px; font-weight: 400; } .section-header h2 { font-size: 25px; line-height: 53px; font-weight: 700; padding: 7px 0 3px 0; border-top: 1px solid #fff; width: 175px; margin: 0 auto 0 auto; } .section h3 { text-transform: uppercase; margin-bottom: -12px; margin-top: 30px; } .expandable { display: none; overflow: hidden; } .expandable h3 { text-transform: uppercase; margin-bottom: -15px; margin-top: 18px; font-size: 18px; } .expandable ul { margin-top: -20px; } .expandable li { font-size: 16px; line-height: 31px; } .expandable p { font-size: 16px; line-height: 31px; margin-bottom: 26px; } .icon { margin-top: 20px; text-align: center; } .see-more { color: #fff; text-decoration: none; margin: 25px auto 7px auto; display: block; text-align: center; background-image: url(images/dist/eye.png); background-position: left center; background-repeat: no-repeat; width: 125px; font-size: 16px; position: relative; left: 11px; } .see-more.open { background-image: url(images/dist/close.png) !important; } .see-more.red { color: red; } .white .section-header h2, .light-grey .section-header h2 { border-top-color: #2c2c2c; } .pullquote h1 { font-size: 30px; line-height: 49px; font-weight: 300; padding: 10px 0 30px 0; margin: 0; text-align: center; font-family: 'Open Sans', sans-serif; color: #4f4f4f; } .pullquote h1 strong { font-weight: 600; } #top_navigation { margin: 0; padding: 0; float: right; } #top_navigation li { list-style: none; float: left; padding: 0 8px 0 8px; } #top_navigation li:last-child { padding-right: 0; } #top_navigation li a { text-decoration: none; color: #ccc !important; text-transform: uppercase; font-size: 12px; font-weight: bold; } #top_navigation li a.active, #top_navigation li a:hover { color: #fff !important; font-weight: bold !important; } #page_header { margin: 0; padding: 21px 0 21px 0; background-color: #195791; height: 26px; position: fixed; border: none; top: 0; width: 100%; z-index: 1000; } #page_copy { position: relative; z-index: 2; } #page_header .container { padding-top: 0; } #introduction { padding: 80px 0 0 0; } #introduction h1 { font-size: 42px; line-height: 50px; font-weight: 600; margin-top: 40px; } #introduction p { font-size: 20px; line-height: 27px; } #introduction img { margin-bottom: 40px; } #introduction .see-more { font-size: 19px; line-height: 21px; color: red; text-align: left; display: inline; left: 0; margin: 0; } #introduction-slider { height: 430px; overflow: hidden; position: relative; margin-left: -120px; } #introduction-slider .slide { display: none; margin: 0 120px; overflow: hidden; width: 960px; } #introduction-slider .slide.active { display: block; } #nav { margin: 20px auto 20px auto; width: 200px; text-align: center; height: 14px; } #nav a { width: 14px; height: 14px; display: inline-block; background-image: url(./images/dist/pager-inactive.png); background-repeat: no-repeat; margin: 0 3px 0 3px; } #nav a.activeSlide { background-image: url(./images/dist/pager-active.png); } a.portfolio_item { display: block; width: 300px; height: 300px; background-size: cover; overflow: hidden; } a.portfolio_item:hover .portfolio_info, #hamburger ul.fade-in{ -webkit-animation: fadeInFromNone 0.5s ease-out; -moz-animation: fadeInFromNone 0.5s ease-out; -o-animation: fadeInFromNone 0.5s ease-out; animation: fadeInFromNone 0.5s ease-out; opacity: 1; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } #samples .grid_4 { margin-bottom: 20px; } .work-desciption strong { font-weight: 700; } .work-desciption { text-align: center; margin: 9px 0 28px 0; font-size: 14px; line-height: 20px; color: #202020; } #footer { background-color: #2c2c2c; color: #fff; padding: 20px 0 100vh 0; width: 100%; } #footer_logo { margin: 25px 0 0 0; } #footer #social { margin: 15px 0 0 0; padding: 0; list-style: none; } #footer #social li a { background-image: url(images/dist/social-icons@2x.png); background-repeat: no-repeat; padding-left: 30px; color: #fff; text-decoration: none; height: 21px; margin-bottom: 15px; display: inline-block; font-size: 14px; background-size: 20px; } .copyright { font-size: 12px; line-height: 20px; } #social li:nth-child(1) a { background-position: 0 -41px; } #social li:nth-child(2) a { background-position: 0 1px; } #social li:nth-child(3) a { background-position: 0 -20px; } .mobile-content { display: none; } .pull-quote { font-size: 25px; line-height: 34px; font-weight: 600; color: #000; margin: 40px 0 50px 0; } h4 { text-transform: uppercase; color: #195791; font-weight: 700; font-size: 18px; line-height: 28px; margin: 0 0 -12px 0; padding: 0; } .work-callout { color: #195791 !important; font-style: italic; font-size: 18px; line-height: 28px; margin: 45px 0 45px 0; } .navigation-case-study { padding: 0 20px 0 20px; } .navigation-case-study h4 { color: #808080; margin-bottom: 3px; } .navigation-case-study a { color: #000; font-size: 23px; line-height: 32px; font-style: italic; text-decoration: none; font-weight: 400; } .work-sample img { margin: 0 auto; text-align: center; } .case-study { padding-top: 70px; } .case-study h1 { color: #000; font-size: 50px; line-height: 60px; text-align: center; text-transform: uppercase; } .case-study .pull-quote { font-size: 44px; line-height: 60px; } .case-study p { font-size: 20px; line-height: 31px; color: #202020; } .fullsize-image { margin: 20px auto 45px auto; text-align: center; width: 1150px; overflow: hidden; } #case-study-image1 { margin: 0 -85px 0 20px; } #case-study-image2 { margin: 20px -172px 10px 20px; } #case-study-image3 { margin: 20px 20px 10px -120px; float: left; } hr { width: 160px; height: 3px; background-color: #d3d3d3; border: none; margin-bottom: 65px; } p.case-study-contact { text-align: center; font-size: 18px; width: 140px; line-height: normal; margin: 0 auto 80px auto; } p.case-study-contact a { display: block; padding-top: 2px; text-decoration: none; color: red; } p.case-study-contact small { color: #a0a0a0; font-size: 12px; padding: 0 0 0 40px; } .see-moree.red { color: red; text-decoration: none; background-image: url(images/dist/eye-red.png); background-repeat: no-repeat; background-position: left center; padding: 0 0 0 30px; margin-left: 60%; font-size: 16px; } .portfolio_item { font-size: 22px; color: #fff; text-decoration: none !important; line-height: 32px; } div.portfolio_info { width: 300px; height: 300px; position: relative; opacity: 0; background-color: rgba(25,87,145,0.9) } div.portfolio_info span { position: absolute; bottom: 0; padding: 10px; } @media (max-width: 1150px) and (min-width: 741px) { .container_12, body, .container, #page_header, #page_copy, #footer { width: 100% !important; margin: 0; padding: 0; } .pullquote h1 { padding: 10px 30px 30px 30px; } #footer { padding-bottom: 100vh; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { margin: 0; } .container_12 .grid_1 { width: 8.25%; } .container_12 .grid_2 { width: 16.5%; } .container_12 .grid_3 { width: 24.75%; } .container_12 .grid_4 { width: 33%; } .container_12 .grid_5 { width: 41.25%; } .container_12 .grid_6 { width: 49.5%; } .container_12 .grid_7 { width: 57.75%; } .container_12 .grid_8 { width: 66%; } .container_12 .grid_9 { width: 74.25%; } .container_12 .grid_10 { width: 82.5%; } .container_12 .grid_11 { width: 90.75%; } .container_12 .grid_12 { width: 99%; } .navigation-case-study h4, .navigation-case-study a { margin: 0 15px 0 15px; display: block; } #case-study-image1 { width: 45% !important; margin: 25px -40px 35px 20px !important; display: block; } #case-study-image2 { width: 45% !important; margin: 25px -60px 5px 20px !important; display: block; } #case-study-image3 { width: 45% !important; margin: 25px 20px 5px -90px !important; display: block; } .case-study .pull-quote { margin: 0 10px 20px 10px; } #top-area { padding-top: 70px; } #introduction { padding: 0; } #introduction h1 { margin: 10px 30px 0 30px; font-size: 30px; line-height: 40px; } #introduction img { margin: 0 15px 0 15px; float: left; width: 91%; } #introduction-slider { overflow: hidden; margin: 0; } #introduction-slider .slide { margin: 0; width: 100% !important; } h1, h2, h3, h4, li, #footer_logo, p { margin-left: 30px; margin-right: 30px; } #do-sub-sections, #top_navigation { display: none; } #top_logo { margin: 15px; margin-left: 30px; } #page_header { height: auto; } .case-study img, .case-study .fullsize-image { width: 95% !important; margin: 5px auto 5px auto !important; display: block; } #hamburger { margin: 0; padding: 0; color: #fff; z-index: 99; top: 15px; height: 22px; width: 39px; } #hamburger a { color: #fff; text-decoration: none; } #hamburger ul { list-style: none; background-color: #000; opacity: 0.9; position: absolute; margin-top: 57px; width: 255px; right: 0; margin-left: 0; padding-left: 0; padding-top: 15px; padding-bottom: 25px; display: none; } #hamburger ul li { text-align: center; font-size: 22px; line-height: 55px; text-transform: uppercase; } #open-burger { background-image: url(images/dist/burger.png); background-repeat: no-repeat; width: 22px; height: 22px; display: block; position: absolute; right: 30px; top: 15px; cursor: pointer; } #close-burger { font-size: 35px; margin-right: 20px; top: 15px; } .work-sample img { width: 99.9%; } .work-sample img.highres.313 { width: 33.3%; } .work-sample img.highres.626 { width: 66.6%; } div.portfolio_info, a.portfolio_item { width: 230px; height: 230px; margin: 0 auto 0px auto; } #samples { padding-right: 20px; padding-left: 0; } #samples .grid_4 { margin-left: 20px; width: 30%; } .mobile-content { display: block; } .case-study .container.light-grey .section img { width: 200px !important; margin-right: 10px !important; } #open-burger.active { background-image: url(images/dist/burger-close.png); } .approach img { margin-left: 30px !important; } #special-case{ margin-bottom: 0 !important; } #unique-image{ margin: 0 0 0 0px !important; float: none !important; } } @media (max-width: 1150px) and (min-width: 1024px) { div.portfolio_info, a.portfolio_item { width: 300px; height: 300px; margin: 0 auto 0px auto; } } @media screen and (max-width: 740px) { .mobile-content img { width: 100%; } #samples { padding-bottom: 20px; } .container_12, body, .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .container, #page_header, #page_copy, #footer { width: 100% !important; margin: 0; padding: 0; } h1, h3, p { padding: 0 20px 0 20px; margin: 10px 30px 10px 10px !important; } h1 { margin: 10px 30px 10px 10px !important; } #nav { display: none; } #introduction { margin-top: 10px; background-image: none; margin: 0; padding: 58px 0 0 0; } #introduction h1 { font-size: 28px; line-height: 36px; } #logo-link { cursor: pointer; display: block; height: 58px; } #footer_logo, #top_logo { margin-left: 30px; width: 48%; margin-top: 15px; max-width: 250px; } #footer_logo{ margin-top: 20px; } #page_header { height: auto; } .work-sample img { width: 100%; } .grid_1, #introduction .see-more, #do-sub-sections, #top_navigation { display: none; } .mobile-content { display: block; } a.portfolio_item { width: 300px; height: 300px; margin: 0 auto 20px auto; } #portfolio-related-work, .expandable { display: none; } hr, .grid_3.icon, .case-study .pull-quote { display: none; } .section-header p { font-size: 18px; line-height: 31px; } .pullquote h1 { font-size: 28px; margin-top: -8px !important; margin-bottom: 0px !important; padding: 10px 30px 30px 30px; } #footer { position: static; margin-top: 0; padding : 25px 0 100vh 0; } #footer li, #footer img { padding-left: 0; } #footer #social { margin: 15px 0 0 30px; } #hamburger { margin: 0; padding: 0; color: #fff; z-index: 99; top: 15px; height: 22px; position: relative; } #hamburger a { color: #fff; text-decoration: none; } #hamburger ul { list-style: none; background-color: #000; opacity: 0.9; position: absolute; margin-top: 43px; width: 40%; right: 0; margin-left: 0; padding-left: 0; padding-top: 15px; padding-bottom: 25px; display: none; } #hamburger ul li { text-align: center; font-size: 1.2em; line-height: 55px; text-transform: uppercase; } #open-burger { position: absolute; right: 30px; top: 0; width: 24px; height: 22px; border: none; outline: none; cursor: pointer; opacity: 1; background-image: url(/images/dist/burger.png); background-position: center center; } #open-burger.active { background-image: url(/images/dist/burger-close.png); } .case-study p { font-size: 16px; line-height: 28px; } .case-study h4 { margin: 10px 10px 10px 28px; } .case-study img, .case-study .fullsize-image, .approach img { width: 95% !important; margin: 5px auto 5px auto !important; display: block; float: none !important; } .navigation-case-study { padding: 10px 0 20px 0 !important; } .navigation-case-study .grid_6 { text-align: left !important; } .navigation-case-study h4, .navigation-case-study a { margin: 5px 5px 5px 10px; display: block; } .navigation-case-study a { font-size: 16px; } .expandable ul { margin: 10px; margin-left: 30px; } .expandable h3 { margin: 20px 0 10px 10px !important; } .expandable.approach h3 { margin: 20px 0 10px 10px !important; } .expandable p, .expandable li { font-size: 14px; line-height: 28px; } .grid_1, .grid_2 { display: none; } .case-study h1 { margin: 5px 0 5px 0 !important; font-size: 32px; line-height: 40px; } .grid_3.icon { width: 25% !important; margin-top: 15px; } .grid_3.icon img { height: 50px; } .grid_3.icon strong { display: none; } #introduction-slider { display: none; } .navigation-case-study .grid_6 { width: 50% !important; } .case-study-contact img { width: 27px !important; } .case-study-contact { text-align: center; font-size: 18px; width: 141px; line-height: normal; margin: 20px auto 20px auto !important; } .case-study-contact small { padding: 0 !important; } .work-details { padding: 0 0 20px 0 !important; } .work-details div { margin-top: 5px !important; margin-left: 30px !important; } .see-more.adjust{ top: 0; } div.portfolio_info { width: 100%; height: 100%; } div.portfolio_info span { font-size: 1em; } } @media screen and (min-width : 375px) and (max-width : 667px) { #top_logo { margin-top: 20px; } #hamburger { position: absolute; right: 0px; width: 50%; } #hamburger ul { width: 100%; } #hamburger ul li { font-size: 16px; line-height: 40px; font-weight: bold; } a.portfolio_item { height: 250px; width: 250px; } .pullquote h1 { font-size: 22px; line-height: 31px; padding: 30px 15px 30px 15px; } .section-header h2{ font-size: 23px; } #footer{ padding: 25px 0 100vh 0; } .approach .section:nth-child(3){ border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; margin: 30px 0 30px 0; padding-top: 20px; padding-bottom: 30px; } #unique-image{ margin: 0 0 0 0 !important; } } @media screen and (max-width : 375px) { #unique-image{ margin: 0 0 0 0 !important; } #top_logo { margin-top: 20px; } #footer{ padding: 25px 0 100vh 0; } .section-header h2{ font-size: 23px; } #hamburger { position: absolute; right: 0px; width: 40%; } #hamburger ul { width: 100%; } #hamburger ul li { font-size: 12px; line-height: 40px; } a.portfolio_item { height: 250px; width: 250px; } .pullquote h1 { font-size: 22px; line-height: 31px; padding: 30px 10px 30px 15px; } .approach .section:nth-child(3){ border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; margin: 30px 0 30px 0; padding-top: 20px; padding-bottom: 30px; } #last-chevron{ display: none; } } .slide { position: absolute; } .slide-in { animation-duration: 1s; animation-name: slide-in; } @keyframes slide-in { from { opacity: 0%; } to { opacity: 100%; } } .slide-out { animation-duration: 1s; animation-name: slide-out; } @keyframes slide-out { from { opacity: 100%; } to { opacity: 0%; } } .chevron { position: relative; padding-bottom: calc(9.25vh); } .chevron::after { content: ""; padding: 0; margin: 0; border-left: calc(50vw - 8.3px) solid transparent; border-right: calc(50vw - 8.3px) solid transparent; border-top: calc(10vh) solid #f00; position: absolute; bottom: 0; } #page_copy .chevron:nth-child(2)::after { border-left-color: #195791; border-right-color: #195791; border-top-color: #2c2c2c; } #page_copy .chevron:nth-child(3)::after { border-left-color: #fff; border-right-color: #fff; border-top-color: #195791; } #page_copy .chevron:nth-child(4)::after { border-left-color: #e2e2e2; border-right-color: #e2e2e2; border-top-color: #fff; }