/* General */ .fullWidth {width:100%; float:left;} .break {display:block;} .break.x2 {margin-bottom:20px;} /* Top marker */ #topMarker {position: absolute;} /* Header */ #header {float:left; width:100%; height:750px; /*640px;*/ background:#f78e56; padding-top:10px;} #header #logoBtn {cursor: pointer;} #header #logoBtn img {width:150px;} #header #navBox {position: fixed; margin: 0 auto; left:0; right:0; height:30px; height:50px; z-index:100; /*background:rgba(247, 142, 86, 0.35);*/} #header #navBox div {margin-top:10px;} #header #navBox #mainNav {position:relative; /* border:solid 1px red; */ width:215px; float:right;} #header #navBox #mainNav ul {float:right; width:100%; padding-left:0;} #header #navBox #mainNav ul {margin:0;} #header #navBox #mainNav ul li {list-style:none; float:left;} #header #navBox #mainNav ul li a {padding-bottom:2px; font-size:.9em; color:white; margin-right:30px; font-family:'open_sanssemibold'; opacity:0.85; line-height:30px; height:30px; transition:all 300ms ease; cursor: pointer;} #header #navBox #mainNav ul li a:hover, #header #navBox #mainNav ul li a.active {opacity:1; transition:all 300ms ease; text-decoration:none; /*border-bottom:solid 2px white;*/} /* #header #navBox #mainNav ul li a.active {text-decoration:underline; opacity:1;} */ #header #navBox #mainNav ul li:last-child a {margin-right:0;} #lineElem {display:block; width:50px; height:2px; background:white; position:absolute; top:25px; left:-3px; opacity:0;} #header .content {text-align:center; color:white; margin-top:235px; font-size:1.5em; font-family: 'robotolight';} /*Triangle*/ .triangle {position:absolute; top:-1px; z-index: 50; width: 0; height: 0; border-style: solid; border-width: 45px 65px 0 65px; border-color: #6dcff6 transparent transparent transparent; left:50%; margin-left:-66px; } /*About */ #about {height:640px; /*500px*/; background: #6dcff6; overflow:hidden; position:relative} #about .content {text-align: center; font-family: "open_sansregular"; font-size:1.2em; color:white; margin-top:230px; margin-left:-500px; opacity:0;} #about .roots {display:block; width:300px; margin:-400px auto 0; opacity:0;} #about .triangle {border-color: #F78E56 transparent transparent transparent;} /*Work*/ #work {position:relative; height:640px; background: #f69679; overflow:hidden;} #work .brain {display:block; width:350px; margin:70px auto 0; opacity:0; transform:scale(0);} #work .smartBox {margin:-1500px auto 0; width:320px;} #work .smartBox p {margin-top:20px; text-align: left; font-family: "open_sansregular"; font-size:1.2em; color:white;} #work .smartCreative {width:300px; display:block;} #work .triangle {border-color: #6dcff6 transparent transparent transparent;} #work #watchBtn {width:220px; margin-top:30px; text-align:center;} #work #watchBtn:hover {background:white; transition:all 300ms ease; color:#333;} /*Careers*/ #careers {position:relative; height:640px; background: #3cb878; overflow:hidden;} #careers .triangle {border-color: #f69679 transparent transparent transparent;} #careers h3 {text-align:center; margin-top:-50px; position:absolute; width:100%; font-family:"oswaldbold"; font-size:2.5em; color:white; text-shadow:-2px 2px 0 rgba(0,0,0,0.5)} #cogBox {position:relative; top:-15px; margin-left:180px; opacity:0;} #cogBox img {position: absolute; top:300px;} #cogBox img:first-child {width:50px; top:0; left:100px;} #cogBox img:nth-child(2) {width:90px; top:25px;; left:145px;} #cogBox img:nth-child(3) {width:140px; top:44px;; left:5px;} #cogBox img:nth-child(4) {width:140px; top:130px;; left:120px;} #cogBox img:nth-child(5) {width:90px; top:220px;; left:40px;} #circleBox {position:relative; width:120px; margin:180px auto 0; transform:scale(0);} #circleBox a {text-decoration:none; cursor:pointer; transition:all 300ms ease; position:absolute; color:white; display:block; text-align:center; top:300px; width:120px; height:120px; line-height:120px; border-radius:100px; background:rgba(0,0,0,0.25); font-family: "robotomedium";} #circleBox a.active, #circleBox a:hover {transition:all 300ms ease; background:rgba(0,0,0,0.45);} #circleBox a:hover {transform:scale(1.1);} #circleBox a:first-child {top:0;} #circleBox a:nth-child(2) {left:100px; top:85px;} #circleBox a:nth-child(3) {left:70px; top:210px;} #circleBox a:nth-child(4) {left:-60px; top:210px;} #circleBox a:nth-child(5) {left:-100px; top:85px;} #circleContent {color:white; margin-top:310px; width:500px; font-family: "robotomedium";} #circleContent h4 {font-size:2em;} #circleContent p {font-family: "robotolight";} /*Footer*/ #footer {position:relative; height:250px; background: #f69679; overflow:hidden; background:#363636; font-family:"open_sanssemibold"; font-size:.9em;} #footer .content {color:white;} #footer nav {margin-top:60px;} #footer nav span {margin-bottom:8px; display:inline-block; color:#aaa;} #footer nav ul {padding:0;} #footer nav ul li {list-style: none; float:none;} #footer nav ul li a {color:white; cursor: pointer; color:#888;} #footer nav ul li a:hover {color:#aaa; transition:all 300ms ease;} #footer .container .bar .viewBtn {font-size:1.35em;} #footer .logoBox {margin-top:50px; float:right;} #footer .logoBox img, #footer .logoBox span, #footer .logoBox p {display:inline-block; vertical-align:middle; margin:0;} #footer .logoBox img {width:220px;} #footer .logoBox span {margin:0 20px; border:dashed 1px #909090; height:100px;} #footer .logoBox p {font-family:"robotolight"; color:#909090;} /* Persitent bar */ #persistBar {position: fixed; height:80px; width:100%; background:#363636; bottom:0; z-index: 80; /*border:solid 1px red;*/} #persistBar img {position:absolute; color:white; font-size:4em; width:60px; left:50%; margin-left:-30px; margin-top:-40px;} #persistBar .viewBtn, #watchBtn, #footer .bar .viewBtn { display:block; margin:16px auto 0; border:0; width:220px; text-align: center; background: none; color:white; border:solid 2px white; border-radius:10px; font-size:1.2em; transition:all 300ms ease; font-family:'oswaldbold'; height:50px; line-height:50px; } #persistBar .viewBtn:hover, #footer .bar .viewBtn:hover {background:white; color:#111; transition:all 300ms ease; text-decoration:none;} /* Video */ #smartVideoBox, #rbBox {z-index:101; width:100%; position:fixed; height:5000px; background:rgba(0,0,0,0.9); display: none;} #smVideo {margin:60px auto 0; display:block; width:55%;} .lbCloseBtn {position:absolute; display:block; top:20px; right:20px; border:0; background:none; color:#888; border:solid 2px #888; width:30px; height:30px; border-radius:30px; transition:all 300ms ease;} .lbCloseBtn:hover {color:white; transition:all 300ms ease; border-color:white;} .lbCloseBtn i {font-size:1em;} /* RecruiterBox */ /* #rbBox {display:block;} */ #rbBox .loadingTxt {font-family:"robotolight"; font-size:1.3em; text-align:center; margin-top:3%; color:#ccc;} #rbBox .jobBox {width:600px; margin:3% auto 0; overflow-y:auto; max-height:600px; font-family: "open_sansregular"} #rbBox .bs-callout {background:white; margin-top:0;} .bs-callout { padding: 20px; margin: 20px 0; border: 1px solid #eee; border-left-width: 3px; border-radius: 3px; } .bs-callout h4 { margin-top: 0; margin-bottom: 5px; } .bs-callout p:last-child { margin-bottom: 0; } .bs-callout code { border-radius: 3px; } .bs-callout+.bs-callout { margin-top: -5px; } .bs-callout-default { border-left-color: #777; } .bs-callout-default h4 { color: #777; } .bs-callout-primary { border-left-color: #428bca; } .bs-callout-primary h4 { color: #428bca; } .bs-callout-success { border-left-color: #5cb85c; } .bs-callout-success h4 { color: #5cb85c; } .bs-callout-danger { border-left-color: #d9534f; } .bs-callout-danger h4 { color: #d9534f; } .bs-callout-warning { border-left-color: #f0ad4e; } .bs-callout-warning h4 { color: #f0ad4e; } .bs-callout-info { border-left-color: #5bc0de; } .bs-callout-info h4 { color: #5bc0de; } /* Media Queries */ @media (min-width: 1200px) { } @media (min-width: 992px) and (max-width: 1199px) { #circleContent {width:100%;} #footer .logoBox img {width:200px;} } @media (min-width: 768px) and (max-width: 991px) { #about .break {display:inline;} #about .break.x2 {display:block;} #about .content {width:100%;} #smVideo {margin-top:80px; width:90%;} #careers #circleContent {width:100%; margin-top:280px;} #footer .logoBox {margin-top:70px;} #footer .logoBox img {width:120px;} #footer .logoBox span {height:60px;} #footer .logoBox p {font-size:.8em;} } @media (max-width: 767px) { #header .break {display:inline;} #header .break.x2 {display:block;} #header {height:auto; padding-bottom:100px;} #header #logoBtn {display:block; margin:0 auto; float:none; width:160px;} #header #navBox #mainNav {margin:0 auto; float:none;} /* #header #navBox #mainNav {margin-left:-10px;} */ /* #header #navBox #mainNav ul {float:none; margin:10px auto 0; width:280px;} */ #header #navBox #mainNav ul li a {margin:0; width:60px; display:inline-block; text-align:left; margin-right:12px;} #header .content {width:90%; margin-left:auto; margin-right:auto; margin-top:150px;} #header .content .break {display:inline;} #header .content .break.x2 {display:block;} #about, #careers {margin:0; padding:0; height:auto; padding:120px 0;} #work {height:600px;} #work .smartBox {margin-top:80px !important;} #about .content {width:100%; margin:0 auto;} #about .row div:nth-child(2) {position:absolute; z-index:0; top:0; padding:0; width:100%;} #about .row div:nth-child(2) .roots {margin:0 auto; width:300px; opacity:0.15 !important;} #smVideo {margin-top:80px; width:90%;} #work .break {display:inline;} #work .break.x2 {display:block;} #work .row div:first-child {position:absolute; z-index:0; top:160px; padding:0; width:100%;} #work .row div:first-child .brain {margin:-80px auto 0; width:300px; opacity:0.15 !important;} #work .smartBox {width:90%;} #work .smartBox p {text-align:center;} #work .smartCreative {width:100%; max-width:280px; margin:0 auto;} #careers {padding-top:60px; padding-bottom:40px;} #careers .row div {float:none;} #careers .row div:first-child { margin-top:40px;} #careers h3 {font-size:2em; margin-top:0 !important; margin-bottom:10px; padding:0 15px; line-height:45px;} #circleBox {width:440px; margin:10px auto 0;} #careers #circleBox a { font-size:.9em; position:relative; top:0; left:0; float:left; display:block; margin-right:10px; width:110px; height:110px; line-height:110px; } #careers #circleBox a:first-child {margin-left:45px;} #careers #circleBox a:nth-child(4) {display:block; clear:both; content:"";} #careers #circleBox a:nth-child(4) {margin-left:104px;} #careers #circleBox a:last-child {} #careers #circleContent {width:90%; margin:20px auto 0;} #careers #circleContent h4 {text-align:center; font-size:1.5em; margin:0; margin-bottom:10px;} #careers #circleContent p {text-align:center;} #careers #cogBox {position:absolute; right:190px; top:-20px;} #footer {margin:0; padding:0; height:auto; padding:60px 0;} #footer .break {display:inline;} #footer nav {width:120px; margin:40px auto 0; text-align:center;} #footer .logoBox {width:100%; margin-top:40px;} #footer .logoBox img {display:block; margin:0 auto; width:200px;} #footer .logoBox span {display:none;} #footer .logoBox p {text-align:center; font-size:1em; width:280px; display:block; margin:20px auto 0;} #rbBox .jobBox {width:80%; margin-top: 12%;} } @media (max-width: 480px) { #header #navBox {position:relative;} #circleBox {margin-top:35px; width:276px;} #careers #circleBox a {font-size:.72em; height:80px; width:80px; line-height:80px;} #careers #circleBox a:first-child {margin-left:8px;} #careers #circleBox a:nth-child(3) {margin-right:0;} #careers #circleBox a:nth-child(4) {margin-left:50px;} #careers h3 {line-height:35px;} #rbBox .jobBox {margin-top: 20%;} } @media (max-width: 320px) { #header .content {margin-top:120px;} #circleBox {margin-top:0; width:276px;} #careers #circleContent {margin-top:0;} #careers #circleContent p {font-size:.84em;} #careers .row div:first-child { margin-top:30px;} #circleBox {transform:scale(.8) !important;} #careers #circleContent h4 {font-size:1.2em; margin-bottom:5px;} #rbBox .jobBox {margin-top: 22%;} } @media only screen and (max-width: 767px) and (orientation: landscape) { #smVideo {margin-top:3%; width:70%;} #rbBox .jobBox {margin-top: 12%; height:300px;} }