html, body {
height: 100%;
}
body {
background: #1f2428;
overflow-x: hidden;
position: relative;
left: 0;
color: #fff;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
font-weight: 300;
-webkit-transition: all 1s cubic-bezier(.25, .8, .25, 1);
transition: all 1s cubic-bezier(.25, .8, .25, 1);
}
.mobile-logo {
display: none;
}
.menu-icon {
display: none;
}
.topbar {
display: none;
}
/* OVERLAY
================================ */
.push-right {
left: 100%;
}
.no-scroll {
/*height: 100%;
overflow: hidden;*/
overflow-y: hidden;
}
.wrapper {
position: relative;
height: 100%;
}
.overlay {
position: fixed;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 48px;
/*overflow: hidden;*/
background-color: rgba(0,0,0,0.5);
z-index: 9999;
-webkit-transition: all .5s cubic-bezier(.25, .8, .25, 1);
transition: all .5s cubic-bezier(.25, .8, .25, 1);
}
.overlay-content {
position: relative;
/*width: 100%;*/
height: 90%;
max-width: 900px;
box-sizing: border-box;
background-color: #fff;
margin: 0 auto;
padding: 36px;
overflow-y: auto;
color: #333;
}
/*.overlay-content::-webkit-scrollbar {
width: 0;
}*/
.overlay-content h1
{
color: #333;
margin-top: 0;
}
.overlay-content h3
{
color: #333;
margin-top: 0;
}
.overlay-content h3, .overlay-content h4 {
font-weight: 900;
}
.overlay-content p {
font-size: 16px;
line-height: 24px;
}
.hide-overlay .overlay {
left: -100%;
}
.overlay-content .closebar {
width: 100%;
text-align: right;
cursor: pointer;
}
.overlay-content .close-bottom {
/*position: absolute;
bottom: 24px;
right: 24px;*/
padding-top: 15px;
font-weight: 900;
cursor: pointer;
}
/* PROJECT PAGE
================================ */
.project-container {
box-sizing: border-box;
background: #1f2428;
width: 100%;
padding: 36px 0;
}
.project-content {
box-sizing: border-box;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 18px;
}
.project-content img {
width: 100%;
margin-bottom: 20px;
}
.project-content .vid {
position: relative;
padding-bottom: 52%;
padding-top: 38px;
height: 0;
margin-bottom: 20px;
}
.project-content .vid iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.project-content h1 {
font-size: 28px;
margin-top: 0;
}
.project-content section {
float: left;
width: 36%;
/*text-align: right;*/
margin-right: 24px;
}
.desc p {
font-size: 16px;
line-height: 24px;
}
.project-content .slides {
float: right;
width: 61%;
}
.grid {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 78%;
/*max-width: 1072px;*/
}
.cell {
box-sizing: border-box;
width: 33%;
/*min-width: 240px;*/
max-width: 285px;
height: auto;
padding: 0 18px 18px 0;
}
.cell img {
width: 100%;
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.cell img:hover {
-webkit-filter: none; /* Chrome, Safari, Opera */
filter: none;
}
/* OVERLAY NAV
================================ */
.overlay-nav-container {
/*background-color: rgba(33, 161, 210, 0.94);*/ /*blue*/
background-color: rgba(50, 58, 69, 0.92); /*dark*/
opacity: 0;
width: 100%;
height: 0;
z-index: 9999;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.overlay-nav {
position: relative;
opacity: 0;
top: 100px;
max-width: 832px;
margin: 0 auto;
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.nav-label {
margin-top: -30px;
padding: 0 0 10px 16px;
color: #fff;
opacity: 0.8;
}
.close-bar {
color: #fff;
font-size: 48px;
text-align: right;
margin: 24px 24px 0px 50px;
}
.close-x { cursor: pointer; }
.nav-links {
color: #fff;
font-size: 20px;
line-height: 56px;
text-align: left;
}
.link {
/*border-bottom: 1px solid #7EBED6;*/
border-bottom: 1px solid #999;
padding: 0 20px 0 20px;
}
.link.first {
border-top: 1px solid #999;
}
.nav-links a { text-decoration: none; }
.nav-links a .link {
color: #fff;
text-decoration: none;
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.nav-links a:hover .link {
/*background-color: #fff;
color: #21A1D2;*/
background-color: #0086c5;
}
.nav-note {
font-size: 16px;
line-height: 22px;
padding: 0 0 20px 0;
}
.show-nav {
height: 100%;
opacity: 1;
}
.show-nav-links {
top: 0;
opacity: 1;
}
.shell {
box-sizing: border-box;
width: 100%;
height: 800px;
background-image: url(../images/wall-angle.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.main {
/*border: 1px solid #000;*/
/*float: left;*/
margin-left: 120px;
width: 594px;
min-height: 1100px;
}
.right {
position: fixed;
/*border: 1px solid #fff;*/
float: right;
/*margin-right: 124px;*/
/*position: absolute;*/
/*margin-left: 600px;*/
top: 0;
right: 124px;
height: 100%;
width: 220px;
z-index: 99;
overflow: visible;
-webkit-transition: all 1s cubic-bezier(.25, .8, .25, 1);
transition: all 1s cubic-bezier(.25, .8, .25, 1);
}
.right-container {
position: relative;
height: 100%;
overflow: visible;
}
.right .logo {
text-align: right;
margin-right: -52px;
margin-top: 128px;
}
.nav {
margin-top: 124px;
margin-bottom: 120px;
}
.nav ul {
list-style-type: none;
}
.nav li {
text-align: right;
font-size: 17px;
font-weight: bold;
line-height: 30px;
}
.nav a {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.nav a:hover {
text-decoration: underline;
}
.home {
display: none;
}
.proj, .approach {
box-sizing: border-box;
background-color: #1f2428;
min-height: 800px;
}
.services {
box-sizing: border-box;
background-color: #1f2428;
min-height: 800px;
background-image: url(../images/bg2.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.team {
box-sizing: border-box;
background-color: #1f2428;
min-height: 800px;
background-image: url(../images/bg3.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.contact {
min-height: 800px;
background-color: #1f2428;
}
.txt-col {
float: left;
width: 360px;
margin-right: 24px;
}
.txt-col-full {
/*float: left;*/
width: 600px;
/* margin-right: 24px;*/
}
.txt-col p {
font-size: 17px;
line-height: 24px;
}
.txt-col img {
width: 100%;
}
.txt-col img:first-child {
margin-top: 15px;
}
.section {
box-sizing: border-box;
padding: 80px 0 120px 120px;
/*padding: 50px;*/
}
.serivces .txt-col {
width: 480px;
}
.serivces .txt-col p {
font-size: 20px !important;
}
.services .txt-col ul {
list-style: none;
/*font-family: "Lato";*/
font-weight: 300;
font-size: 20px;
text-shadow: 1px 1px #000000;
padding: 0;
margin-top: 36px;
}
.services .txt-col li {
margin: 0;
padding: 6px 6px 6px 12px;
line-height: 36px;
border-top: 1px solid rgba(255,255,255,0.5);
background-color: rgba(31,36,40,0.5);
}
.services .txt-col li:nth-last-child(1) {
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.title {
font-size: 36px;
margin-bottom: 12px;
font-weight: 400;
}
.copy {
line-height: 1.75em;
}
.section ul {
font-size: 17px;
line-height: 24px;
padding-top: 1px;
}
.section li {
margin: 0 0 5px 0;
}
.show {
display: block;
}
/*OUR TEAM*/
.team .section {
max-width: 1272px;
}
.team .section .wow {
display: flex;
flex-wrap: wrap;
}
.team .col {
margin-right: 30px;
width: 220px;
cursor: pointer;
min-width: 200px;
}
.team .col img {
margin-top: 17px;
margin-bottom: 6px;
width: 100%;
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.team .col:hover img {
-webkit-filter: none; /* Chrome, Safari, Opera */
filter: none;
}
.name {
font-size: 18px;
}
.t-title {
font-size: 13px;
margin-bottom: 15px;
}
/*CONTACT US*/
.contact img {
margin: 15px 0;
width: 100%;
max-width: 730px;
}
.contact span.txt {
font-size: 18px;
}
.contact span.th {
font-size: 24px;
}
/*PROJECT PAGE*/
.proj-top {
padding-bottom: 15px;
margin-bottom: 42px;
border-bottom: 1px solid rgba(255,255,255,0.33);
}
.proj-top .branding {
font-weight: 700;
float: left;
}
.proj-top .go-back {
float: right;
}
.proj-top .go-back a, .proj-top .go-top a {
color: rgba(255,255,255,0.7);
text-decoration: none;
cursor: pointer;
}
.proj-top .go-back a:hover, .proj-top .go-top a:hover {
color: rgba(255,255,255,1);
text-decoration: none;
}
.proj-top.bottom {
border-top: 1px solid rgba(255,255,255,0.33);
border-bottom: none;
padding-top: 15px;
margin-top: 40px;
}
.proj-top.bottom .go-back {
float: left;
}
.proj-top.bottom .go-top {
float: right;
}
@media (max-width: 1412px) {
.team .section {
max-width: 900px;
}
}
@media (max-width: 1320px) {
.grid {
width: 72%;
}
}
@media (max-width: 1200px) {
.overlay-content {
padding: 60px 80px;
}
.overlay section {
float: none;
width: 100%;
/*text-align: right;*/
margin-right: 36px;
}
.overlay .slides {
float: none;
width: 100%;
}
.section {
padding: 80px 0 80px 80px;
}
.txt-col {
width: 330px;
}
}
@media (max-width: 1120px) {
.team .section {
max-width: 700px;
}
}
@media (max-width: 1100px) {
.section {
padding: 60px 0 60px 60px;
}
.txt-col {
width: 320px;
}
.right {
right: 100px;
}
.right .logo {
margin-top: 80px;
}
}
@media (max-width: 999px) {
.right {
display: none;
}
.mobile-logo {
display: block;
position: absolute;
width: 100%;
top: 180px;
text-align: center;
z-index: 99;
}
.menu-icon {
display: block;
box-sizing: border-box;
position: absolute;
top: 24px;
right: 48px;
z-index: 199;
}
.topbar {
display: block;
position: fixed;
width: 100%;
background-color: #3a4c01;
z-index: 198;
color: #fff;
font-size: 24px;
padding: 20px;
}
.menu-icon img {
position: fixed;
}
.section {
padding: 48px 36px 48px 24px;
}
.txt-col {
float: none;
width: 100%;
margin-right: 0;
}
.proj, .services, .approach, .team, .contact {
padding-top: 80px;
}
.shell .section {
width: 500px;
max-width: none;
margin: 0 auto;
padding: 42px 0px 42px 0px;
}
.proj .section {
width: 500px;
max-width: none;
margin: 0 auto;
padding: 42px 0px 42px 0px;
}
.grid {
width: 100%;
}
.cell {
width: 50%;
height: auto;
}
.proj img {
/*width: 46%;*/
}
.services .section {
width: 500px;
margin: 0 auto;
padding: 42px 0px 42px 0px;
}
.approach .section {
width: 500px;
margin: 0 auto;
padding: 42px 0px 42px 0px;
}
.team .section {
width: 500px;
margin: 0 auto;
padding: 42px 0px 42px 0px;
}
.team img {
width: 100%;
}
.team col:nth-child(even) {
float: none;
}
.team col {
width: 44%;
}
.overlay-content {
box-sizing: border-box;
max-width: 100%;
margin: 16px;
padding: 24px;
}
.close {
/*margin-left: -84px;*/
/*padding-top: 36px;*/
}
.close-controls {
max-width: 100%;
}
.project-content {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 18px;
}
.project-content img {
width: 100%;
margin-bottom: 20px;
}
.project-content h1 {
margin-top: 0;
}
.project-content section {
float: none;
width: 100%;
/*text-align: right;*/
margin-right: 0;
}
.project-content .slides {
float: none;
width: 100%;
}
}
@media (max-width: 640px) {
.shell .section,
.proj .section,
.services .section,
.approach .section,
.team .section {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 36px 24px;
}
.team .col, .team img {
width: 100%;
}
}
@media (max-height: 800px) {
.right .logo {
text-align: right;
margin-right: -52px;
margin-top: 100px;
}
.nav {
margin-top: 100px;
margin-bottom: 120px;
}
}
@media (max-width: 480px) {
.proj img {
width: 100%;
}
}
.push-right-right {
right: -250% !important;
}
.push-left {
right: 90%;
}