html, body {margin: 0px; padding: 0px;}
body {height: 100%; min-height: 100%; color: #373737; font-size: 16px; line-height: 26px; letter-spacing: 0; background: #f3f3f3;}
img {border: 0px;}
* {margin: 0px; padding: 0px; /*-webkit-backface-visibility: hidden;*/ font-weight: normal; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
input:focus,
a:focus {outline: 0;}
a {text-decoration: none;}
a:hover {opacity: 0.5;}
h1,
h2,
h3,
h4 {font-weight: normal;}
h2,
h3,
#process h4 span {float: left; width: 100%; margin-top: 52px; margin-bottom: 56px; font-size: 20px; line-height: 30px; text-transform: uppercase;}
.wrapper {float: left; width: 100%; position: relative; text-align: center;}
.container {max-width: 1170px; padding: 0 30px; margin: 0 auto; text-align: left;}
.inner {float: left; width: 100%; position: relative;}
.color-b #menu ul li.active a,
.color-b h2,
.color-b h3,
.color-b #services .inner > div.active h4,
.color-b #process h4 span,
.color-b #career .morelink,
.color-b #career .jobmail a,
.color-b #contact .morelink,
.color-b #process-slider .thumbs li.active a {color: #467ad7;}
/*.color-b #menu,
.color-b #menu ul {background-color: #0d1728;}*/
.color-b #career .morelink,
.color-b #contact .morelink:first-of-type,
.color-b #contact .morelink:last-of-type {background-image: url(../img/morelink-b.png);}
.color-b #top {background-color: #294482; /*background-image: url(../img/bg-01-b.jpg);*/}
.color-b #industries {background-color: #162b5d; background-image: url(../img/bg-02-b.jpg);}
.color-b #ux-camp {background-color: #0f1a35; background-image: url(../img/ux-camp-b.jpg);}
.color-c #menu ul li.active a,
.color-c h2,
.color-c h3,
.color-c #services .inner > div.active h4,
.color-c #process h4 span,
.color-c #career .morelink,
.color-c #career .jobmail a,
.color-c #contact .morelink,
.color-c #process-slider .thumbs li.active a {color: #46d7c9;}
/*.color-c #menu,
.color-c #menu ul {background-color: #0d2825;}*/
.color-c #career .morelink,
.color-c #contact .morelink:first-of-type,
.color-c #contact .morelink:last-of-type {background-image: url(../img/morelink-c.png);}
.color-c #top {background-color: #307d6c; /*background-image: url(../img/bg-01-c.jpg);*/}
.color-c #industries {background-color: #1c5a4c; background-image: url(../img/bg-02-c.jpg);}
.color-c #ux-camp {background-color: #13352e; background-image: url(../img/ux-camp-c.jpg);}
.color-r #menu ul li.active a,
.color-r h2,
.color-r h3,
.color-r #services .inner > div.active h4,
.color-r #process h4 span,
.color-r #career .morelink,
.color-r #career .jobmail a,
.color-r #contact .morelink,
.color-r #process-slider .thumbs li.active a {color: #d74647;}
/*.color-r #menu,
.color-r #menu ul {background-color: #280d0e;}*/
.color-r #career .morelink,
.color-r #contact .morelink:first-of-type,
.color-r #contact .morelink:last-of-type {background-image: url(../img/morelink-r.png);}
.color-r #top {background-color: #86222e; /*background-image: url(../img/bg-01-r.jpg);*/}
.color-r #industries {background-color: #61111a; background-image: url(../img/bg-02-r.jpg);}
.color-r #ux-camp {background-color: #370c11; background-image: url(../img/ux-camp-r.jpg);}
#top {/*height: 900px;*/ z-index: 1; background-repeat: no-repeat; background-position: center top;}
#top .inner {/*height: 900px;*/ z-index: 5;}
#top #video-bg {float: left; width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; }
.logo {float: left; width: 100%; /*height: 410px;*/}
.logo img {float: left; margin-top: 296px; margin-right: 10px; margin-bottom: 800px; opacity: 0;}
.logo img.letter-o {margin-top: 294px;}
.logo img.letter-i {margin-right: 11px;}
.logo img.letter-e {margin-top: 280px; margin-right: 12px;}
#top .cols {float: left; width: 100%;}
#top .col-l {float: left; max-width: 800px;}
#top .col-r {float: right; max-width: 370px;}
h1,
#top .col-r > span {float: left; width: 100%; margin-top: 38px; font-size: 20px; line-height: 24px; color: #ffffff; text-transform: uppercase;}
#top .col {opacity: 0; /*margin-bottom: 276px;*/}
#top .col a {float: left; width: 70px; height: 70px; margin-top: 58px; margin-right: 30px; position: relative;}
#top .col img {float: left; width: 70px; height: 70px; top: 0px; left: 0px; position: absolute;}
#top .col .circle {
float: left; width: 70px; height: 70px; top: 0px; left: 0px; position: absolute;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#top .col a:hover .circle {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
#menu {position: absolute; left: 0px; top: -200px; z-index: 9999;}
#menu .inner {height: 60px;}
#menu ul {float: left; list-style-type: none;}
#menu,
#menu ul {background-color: #151515;}
#menu ul li {float: left; margin-right: 26px;}
#menu ul li img {float: left; margin-top: -2px; margin-right: 20px; position: relative; border: 0px;}
#menu ul li a {float: left; margin-top: 17px; color: #ffffff;}
#menu ul li a#logo-link {color: initial !important;}
/*#menu ul li a:hover {color: #8a8a8a; opacity: 1.0 !important;}*/
#about {margin-top: 60px;}
.icon-menu {display: none;}
.hideme {opacity: 0;}
.slideme {opacity: 0;}
#about h3,
#career h3,
#contact h3,
#ux-camp h2 {float: left; width: auto; margin-top: 0px; margin-bottom: 0px; font-size: 60px; line-height: 60px; font-weight: normal; color: #373737; text-transform: none;}
#about p {float: right; max-width: 570px; margin-top: 2px; text-align: left;}
#about h3 {width: 400px;/*margin-left: -500px;*/}
#services h3 {margin-bottom: 56px;}
#services .inner > div {float: left; width: 389px; height: 300px; margin-right: 1px; margin-bottom: 1px; position: relative; overflow: hidden; cursor: pointer;}
/*#services .inner > div.middle {width: 390px; margin-right: 1px; margin-left: 1px;}*/
#services .inner > div > img {
top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; z-index: 1;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#services .inner > div:hover > img {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
#services .inner > div.active > img {display: none;}
#services .inner > div h4 img {display: none;}
#services .inner > div h4,
#services .inner > div p {float: left; width: 89%; margin-left: 5%; z-index: 2; position: relative; text-align: center;}
#services .inner > div h4 {
margin-top: 144px; font-size: 20px; line-height: 20px; color: #ffffff; text-transform: uppercase;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
/*
#services .inner > div:not(.active):hover h4 {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
*/
#services .inner > div.active h4 {margin-top: 70px;}
#services .inner > div p {float: left; margin-top: 25px; display: none;}
#services .inner > div.active p {display: block;}
#platforms-systems .inner {overflow: hidden;}
#platforms-systems .col {float: left; /*max-width: 570px;*/width: 49%;}
#platforms-systems .col-l {/*margin-right: 20px;*/margin-right: 2%;}
#platforms-systems .col > div {clear: left;}
#platforms-systems .col-l > div {float: left; /*margin-left: -1600px;*/}
#platforms-systems .col-r > div {float: right; /*margin-right: -1600px;*/}
#platforms-systems .col > div > div {float: left; /*max-width: 190px;*/width: 33%; position: relative; opacity: 0;}
#platforms-systems .col > div > div img {float: left; margin-left: 55px;}
#platforms-systems .col > div > div h4 {float: left; width: 100%; text-align: center; font-size: 12px; line-height: 18px; color: #c7c7c7;}
#industries {margin-top: 56px; z-index: 1; background-repeat: no-repeat; background-position: center top;}
#industries .inner {min-height: 336px;}
#industries h3 {color: #ffffff;}
#industries-slider,
#industries-slider .mb-slider {float: left; width: 100%; overflow: hidden; position: relative;}
#industries-slider .mb-slider .slides-outer {float: left; width: 999999px;}
#industries-slider .mb-slider .slides-outer .slides {float: left; width: 1170px; list-style-type: none;}
#industries-slider .mb-slider .slides-outer .slides li,
.swipe-wrap > div {float: left; width: 32%; margin-right: 2%;}
#industries-slider .mb-slider .slides-outer .slides li:last-of-type,
.swipe-wrap > div:last-of-type {margin-right: 0px;}
#industries-slider .mb-slider .slides-outer .slides li ul,
#mySwipe ul {float: left; width: 100%; list-style-type: none;}
#industries-slider .mb-slider .slides-outer .slides li ul li,
#mySwipe ul li {float: left; width: 100%; margin-bottom: 15px; text-align: center; font-size: 20px; line-height: 20px; color: #ffffff;}
#industries-slider .thumbs {display: none;}
nav {display: none;}
#process {padding-bottom: 56px; border-bottom: 1px solid #e7e7e7;}
#process-slider,
#process-slider .mb-slider {float: left; width: 100%; overflow: hidden; position: relative;}
#process-slider .mb-slider .slides-outer {float: left; width: 999999px;}
#process-slider .mb-slider .slides-outer .slides {float: left; width: 1170px; list-style-type: none;}
#process-slider .mb-slider .slides-outer .slides li {float: left; /*max-width: 370px; margin-right: 20px;*/width: 30%; margin-right: 5%;}
#process-slider .mb-slider .slides-outer .slides li:last-of-type {margin-right: 0px;}
#process-slider .thumbs {display: none;}
#process h4 span {margin-top: 0px; margin-bottom: 0px; text-align: center;}
#process h4 strong,
.jobs > div h4 {float: left; width: 100%; margin-top: 15px; text-align: center; font-size: 30px; line-height: 36px; font-weight: normal; color: #373737;}
#jobs-top {float: left; width: 100%; margin-top: -50px;}
#jobs-top a {margin-top: 102px;}
#process p {float: left; width: 100%; margin-top: 52px; text-align: left;}
#clients {padding-bottom: 46px; border-bottom: 1px solid #e7e7e7;}
#clients .inner > div {float: left; clear: left; width: 100%; /*margin-left: -1600px;*/}
#clients img {float: left; width: 16%; height: auto; margin-right: 0.8%; opacity: 0;}
#clients img.last {margin-right: 0px;}
#work-slider {float: left; width: 100%; height: 630px; position: relative; overflow: hidden;}
#work-slider > .mb-slider {float: left; width: 100%; height: 100%; position: relative; z-index: 1;}
#work-slider > .mb-slider > .slides-outer {float: left; width: 999999px; height: 100%; position: absolute; z-index: 2;}
#work-slider > .mb-slider > .slides-outer > .slides {float: left; height: 100%; position: relative; list-style-type: none;}
#work-slider > .mb-slider > .slides-outer > .slides li {float: left; width: 1170px; height: 100%; overflow: hidden;}
#work-slider > .mb-slider > .slides-outer > div {float: left; /*position: absolute; top: 0px;*/ z-index: 1;}
.work-slider-inner {float: left; width: 1170px; height: 100%; overflow: hidden; position: relative;}
.work-slider-inner .mb-slider {float: left; width: 100%; height: 100%; overflow: hidden; position: relative;}
.work-slider-inner .mb-slider {z-index: 1;}
.work-slider-inner .mb-slider .slides-outer {float: left; width: 999999px; height: 100%; position: absolute;}
.work-slider-inner .mb-slider .slides {float: left; height: 100%; list-style-type: none; position: relative;}
.work-slider-inner .mb-slider .slides li {float: left; width: 1170px; height: 100%; overflow: hidden; position: relative;}
.work-slider-inner .mb-slider .slides li > img {float: left; top: 0px; left: 0px; width: 100%; height: 560px; position: absolute; z-index: 1;}
.work-slider-inner .mb-slider .slides li .cover {float: left; top: 0px; left: 0px; width: 100%; height: 560px; position: absolute; z-index: 1; background: transparent; opacity: 0.67;}
.active .work-slider-inner .mb-slider .slides li .cover {background: #000000;}
.work-slider-inner .mb-slider .slides li .col-l {float: left; max-width: 510px; bottom: 120px; left: 60px; position: absolute; z-index: 3;}
.work-slider-inner .mb-slider .slides li .col-l h3 {float: left; width: 100%; margin-bottom: 20px; font-size: 60px; line-height: 60px; color: #ffffff; text-align: left; text-transform: none;}
.work-slider-inner .mb-slider .slides li .col-l p {float: left; width: 100%; color: #ffffff; text-align: left;}
.work-slider-inner .mb-slider .slides li .col-l p a {color: #ffffff; text-decoration: none;}
.work-slider-inner .mb-slider .slides li .col-l .morelink,
#ux-camp .morelink {float: left; margin-top: 20px; margin-bottom: 0px; color: #ffffff; background-image: url(../img/morelink-w.png);}
.work-slider-inner .mb-slider .slides li .phones {float: left; margin-left: 106px;}
.work-slider-inner .mb-slider .slides li .phone {float: left; width: 270px; height: 567px; margin-top: 63px; margin-left: 36px; /*right: 200px; bottom: 0px;*/ position: relative; z-index: 5;}
.work-slider-inner .mb-slider .slides li .phone.single-phone {right: 200px; bottom: 0px; position: absolute; margin: 0px;}
.work-slider-inner .mb-slider .slides li .phone .phonepic {float: left; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.work-slider-inner .mb-slider .slides li .phone .apppic {
float: left; width: 228px; height: 405px; margin-top: 83px; margin-left: 23px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray;
}
.active .work-slider-inner .mb-slider .slides li .phone .apppic {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}
.work-slider-inner .arrows {float: right; width: 1050px; right: 60px; bottom: 0px; position: absolute; z-index: 2; display: none;}
.active .work-slider-inner .arrows {display: block;}
.work-slider-inner .arrows a {width: 70px; height: 70px; margin-top: -190px;}
.work-slider-inner .arrows .prev-arrow {float: left; background: url(../img/icon-arrow-l.png) no-repeat 0px 0px; display: none;}
.work-slider-inner .arrows .next-arrow {float: right; background: url(../img/icon-arrow-r.png) no-repeat 0px 0px;}
.work-slider-inner .arrows .move-arrow {float: right; width: 70px !important; background: url(../img/icon-arrow-rr.png) no-repeat 0px 0px;}
#work-slider > .arrows {float: left; width: 100%; position: relative; z-index: 2;}
#work-slider > .arrows .prev-arrow {float: left; width: 10px; height: 560px; margin-top: -630px; background: transparent;}
#work-slider > .arrows .next-arrow {float: right; width: 10px; height: 560px; margin-top: -630px; background: transparent;}
#work-slider > .mb-slider .arrows {/*display: none;*/}
#work-slider > .mb-slider > .slides li.active .arrows {display: block;}
.morelink {float: left; clear: left; height: 30px; margin-top: 52px; margin-bottom: 56px; padding-right: 23px; font-size: 20px; line-height: 30px; text-transform: uppercase; background-repeat: no-repeat; background-position: right top;}
.jobmail {float: left; clear: left; height: 30px; margin-top: 30px; margin-bottom: 56px; padding-right: 23px; font-size: 20px; line-height: 30px; background-repeat: no-repeat;}
#career .jobmail a {text-transform: uppercase;}
#career .morelink span {display: none;}
#career .morelink span.active {display: inline;}
.jobs {float: left; width: 100%; margin-top: 5px; display: none;}
.jobs.active {display: block;}
.jobs > div {float: left; width: 100%; margin-bottom: 56px;}
.jobs > div h4 {text-align: left;}
.jobs > div p {float: left; width: 100%; margin-top: 20px;}
.jobs > div strong {float: left; width: 100%; margin-top: 20px;}
.jobs > div ul {float: left; width: auto; margin-top: 20px; margin-left: 30px;}
.jobs > div ul li {float: left; clear: left; width: auto;}
#map {height: 490px; z-index: 1;}
#map-canvas {float: left; width: 100%; height: 490px; z-index: 1;}
#contact {height: 490px; z-index: 2;}
#contact .inner {z-index: 2;}
#contact .inner > div {margin-top: -490px;}
#contact h3 {margin-bottom: 40px;}
#contact .morelink {margin-top: 0px; margin-bottom: 10px; /*background: none;*/}
#contact .morelink:last-of-type {display: none;}
#ux-camp {background-repeat: no-repeat; background-position: center top;}
#ux-camp .inner {height: 733px;}
#ux-camp h2 {margin-top: 255px; color: #ffffff;}
.footer-data {float: left; margin-top: 56px;}
.footer-data #address1 {float: left; left: 0px;}
.footer-data #address2 {float: left; margin-left: 100px;}
#footer p {float: left; clear: left; margin-bottom: 20px;}
#footer p.photographs {margin-top: 20px; font-size: 12px;}
#footer p.photographs a {color: #373737;}
#footer .social-media {float: right; margin-top: 56px;}
#footer .social-media img {float; right; width: 25px; height: 24px; margin-left: 28px;}
.hidden {display: none;}
.slides-mobile {display: none;}
.slides-buffer {display: none;}
.link-outer {float: left;}
.swipe {
overflow: hidden;
/*visibility: hidden;*/
position: relative;
float:left;
}
.swipe-wrap {
overflow: hidden;
position: relative;
float:left;
}
.swipe-wrap > div {
float:left;
position: relative;
}
/* ipad landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body {font-size: 14px; line-height: 24px;}
.container {max-width: 940px;}
#top .col-l {max-width: 620px;}
#top .col-r {max-width: 300px;}
#about h3 {width: 460px;}
#about p {max-width: 460px;}
#services .inner > div {width: 33.2%; height: 240px;}
#services .inner > div h4 {margin-top: 114px;}
#services .inner > div.active h4 {margin-top: 35px;}
#services .inner > div p {font-size: 14px;}
#platforms-systems .col > div > div img {margin-left: 37px;}
#industries-slider .mb-slider .slides-outer .slides,
#process-slider .mb-slider .slides-outer .slides {width: 940px;}
#process-slider .mb-slider .slides-outer .slides li strong br {display: none;}
#work-slider {height: 490px;}
#work-slider > .mb-slider > .slides-outer > .slides li {width: 940px;}
.work-slider-inner {width: 940px;}
.work-slider-inner .mb-slider .slides li {width: 940px;}
.work-slider-inner .mb-slider .slides li > img {height: 450px;}
.work-slider-inner .mb-slider .slides li .cover {height: 450px;}
.work-slider-inner .mb-slider .slides li .col-l {max-width: 510px; bottom: 80px; left: 40px;}
.work-slider-inner .mb-slider .slides li .phones {margin-left: 99px;}
.work-slider-inner .mb-slider .slides li .phone {width: 220px; height: 462px; margin-top: 28px; margin-left: 20px;}
.work-slider-inner .mb-slider .slides li .phone.single-phone {right: 160px;}
.work-slider-inner .mb-slider .slides li .phone .apppic {width: 186px; height: 330px; margin-top: 68px; margin-left: 19px;}
.work-slider-inner .arrows {width: 860px; right: 40px;}
.work-slider-inner .arrows a {margin-top: -150px;}
#work-slider > .arrows .prev-arrow {height: 450px; margin-top: -490px;}
#work-slider > .arrows .next-arrow {height: 450px; margin-top: -490px;}
#ux-camp .inner {height: 520px;}
#ux-camp h2 {margin-top: 155px;}
#about h3,
#career h3,
#contact h3,
#ux-camp h2 {font-size: 58px; line-height: 58px;}
#contact .morelink:last-of-type {display: block !important;}
}
/* ipad portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {font-size: 14px; line-height: 24px;}
.container {max-width: 724px; padding: 0 22px;}
#top .col-l {max-width: 352px;}
#top .col-r {max-width: 352px;}
#about h3 {width: 100%; margin-bottom: 20px;}
#about p {max-width: 100%;
-moz-column-count: 2;
-moz-column-gap: 30px;
-webkit-column-count: 2;
-webkit-column-gap : 30px;
}
#services .inner > div {width: 49.8%; height: 280px;}
#services .inner > div h4 {margin-top: 134px;}
#services .inner > div.active h4 {margin-top: 55px;}
#services .inner > div p {font-size: 14px;}
#platforms-systems .col > div > div img {margin-left: 37px;}
#industries-slider .mb-slider .slides-outer .slides,
#process-slider .mb-slider .slides-outer .slides {width: 724px;}
#process-slider .mb-slider .slides-outer .slides li {width: 100%; margin-right: 0px; margin-bottom: 40px;}
#process-slider .mb-slider .slides-outer .slides li * {text-align: left;}
#process-slider .mb-slider .slides-outer .slides li p {margin-top: 22px;}
#process-slider .mb-slider .slides-outer .slides li strong br {display: none;}
#clients img {width: 32%; margin-right: 1%;}
#work-slider {height: 407px;}
#work-slider > .mb-slider > .slides-outer > .slides li {width: 724px;}
.work-slider-inner {width: 724px;}
.work-slider-inner .mb-slider .slides li {width: 724px;}
.work-slider-inner .mb-slider .slides li > img {height: 347px;}
.work-slider-inner .mb-slider .slides li .cover {height: 347px;}
.work-slider-inner .mb-slider .slides li .col-l {max-width: 330px; bottom: 90px; left: 35px;}
.work-slider-inner .mb-slider .slides li .phones {margin-left: 20px;}
.work-slider-inner .mb-slider .slides li .phone {width: 182px; height: 383px; margin-top: 24px; margin-left: 15px;}
.work-slider-inner .mb-slider .slides li .phone.single-phone {right: 113px;}
.work-slider-inner .mb-slider .slides li .phone .apppic {width: 158px; height: 273px; margin-top: 57px; margin-left: 15px;}
.work-slider-inner .arrows {width: 860px; right: 20px;}
.work-slider-inner .arrows a {margin-top: -150px;}
#work-slider > .arrows .prev-arrow {height: 347px; margin-top: -407px;}
#work-slider > .arrows .next-arrow {height: 347px; margin-top: -407px;}
#ux-camp .inner {height: 520px;}
#ux-camp h2 {margin-top: 155px;}
#about h3,
#career h3,
#contact h3,
#ux-camp h2 {font-size: 58px; line-height: 58px;}
.hidden {display: none !important; margin-top: -240px !important;}
#contact .morelink:last-of-type {display: block !important;}
}
/* iphone portrait */
@media
only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
body {font-size: 14px; line-height: 24px; background: #f3f3f3 !important;}
.container {width: 280px; max-width: 280px; padding: 0 20px;}
.logo img {margin-right: 5px; width: auto; height: 32px;}
.logo img.letter-o {height: 34px;}
.logo img.letter-e {height: 41px; margin-right: 6px; margin-top: 290px;}
#top .col {width: 100% !important; max-width: 100% !important; clear: left; margin-bottom: 30px;}
#top .col a {width: 45px; height: 45px; margin-top: 25px; margin-right: 18px;}
#top .col a img,
#top .col a .circle {width: 45px; height: 45px;}
#top .col-l a {display: none;}
#top .col-l {margin-bottom: 0px;}
#menu ul {width: 320px; margin-right: -20px; margin-left: -20px; padding-bottom: 10px; height: 50px; overflow: hidden;}
#menu ul.active {height: auto;}
#menu ul li {width: 100%; height: 50px;}
#menu ul li a {margin-left: 20px; margin-top: 0px; font-size: 30px; line-height: 50px;}
#menu ul li:first-of-type a {display: none;}
#menu ul li .icon-menu {float: left; display: block !important; width: 32px; height: 24px; margin-top: 18px; margin-left: 20px; cursor: pointer;}
#menu ul li .icon-menu:hover {opacity: 0.5;}
#about h3,
#career h3,
#contact h3,
#ux-camp h2 {font-size: 34px !important; line-height: 36px !important;}
#about h3 {margin-top: 0px !important;}
h2, h3, #process h4 span {margin-top: 32px !important; margin-bottom: 20px !important;}
#about {margin-top: 0px;}
#about h3 {width: 100%; margin-bottom: 20px;}
#about p {max-width: 100%;}
#services .inner > div {width: 100%; height: auto; padding-bottom: 40px; border: 0px;}
#services .inner > div img {
display: none;
}
#services .inner > div h4 .colored {display: none;}
#services .inner > div h4 .black {display: inline;}
#services .inner > div.active h4 .colored {display: inline;}
#services .inner > div.active h4 .black {display: none;}
#services .inner > div h4 {width: auto; margin-top: 0px; margin-left: 0px; color: #373737; text-align: left;}
#services .inner > div.active h4 {margin-top: 0px;}
#services .inner > div h4 img {display: inline; width: 9px; height: 15px; margin-left: 5px;}
#services .inner > div.active h4 img {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}
#services .inner > div p {margin-left: 0px; font-size: 14px; text-align: left;}
#platforms-systems .col {width: 100%; margin-right: 0px;}
#platforms-systems h3 {margin-top: 22px;}
.platforms {float: left !important; width: 100%;}
#platforms-systems .col > div > div {text-align: center;}
#platforms-systems .col > div > div img {float: none; margin-left: auto;}
#industries {background-image: none !important;}
#industries h3 {margin-top: 52px !important; text-align: center;}
/*
#industries-slider .mb-slider .slides-outer .slides li {width: 280px; margin-right: 0px;}
#industries-slider .mb-slider {height: 200px;}
#industries-slider .mb-slider .slides-outer {position: absolute; top: 0px; left: 0px;}
#industries-slider .mb-slider .slides-outer .slides li {width: 280px; margin-right: 0px;}
#industries-slider .mb-slider .slides-outer .slides li * {text-align: center;}
#industries-slider .thumbs {display: block !important; float: left; margin-top: 170px; margin-left: 100px; list-style-type: none;}
#industries-slider .thumbs li {float: left; margin-right: 25px;}
#industries-slider .thumbs li:last-of-type {margin-right: 0px;}
#industries-slider .thumbs li a {float: left; width: 10px; height: 10px; border-radius: 10px; font-size: 0px; line-height: 0px; text-transform: uppercase; color: #cfcfcf; background: #ffffff; opacity: 0.25;}
#industries-slider .thumbs li.active a {opacity: 1;}
#industries-slider .thumbs li.active a:hover {opacity: 1;}
*/
.swipe-wrap {width: 999999px !important;}
.swipe {max-width: 280px;}
.swipe-wrap > div {float:left;width: 280px;margin-right:0px;}
nav {float: left; display: block !important;}
nav ul {display: block !important; float: left; margin-top: 10px !important; margin-left: 100px; list-style-type: none;}
nav ul li {float: left; }
nav ul li {float: left; width: 10px; height: 10px; margin-right: 25px; border-radius: 10px; font-size: 0px; line-height: 0px; text-transform: uppercase; color: #cfcfcf; background: #ffffff; opacity: 0.25;}
nav ul li:last-of-type {margin-right: 0px;}
nav ul li.on {opacity: 1;}
nav ul li.on:hover {opacity: 1;}
#process {padding-bottom: 26px;}
#process .inner > div {width: 100%; margin-right: 0px;}
#process .inner > div * {text-align: left;}
#process .inner > div p {margin-top: 22px;}
#process-slider .mb-slider .slides-outer {position: absolute; top: 40px; left: 0px;}
#process-slider .mb-slider .slides-outer .slides li {width: 280px; margin-right: 0px;}
#process-slider .mb-slider .slides-outer .slides li * {text-align: center;}
#process-slider .thumbs {display: block !important; float: left; width: 100%; list-style-type: none;}
#process-slider .thumbs li {float: left; margin-right: 25px;}
#process-slider .thumbs li:last-of-type {margin-right: 0px;}
#process-slider .thumbs li a {float: left; font-size: 20px; line-height: 30px; text-transform: uppercase; color: #373737;}
#process-slider .thumbs li.active a:hover {opacity: 1;}
#process h4 span {display: none;}
#clients h2 {text-align: center;}
#clients img {float: none; width: 170px; margin-right: auto; margin-left: auto; opacity: 1 !important;}
#clients .clients {text-align: center;}
#work-slider {height: 407px;}
#work-slider > .mb-slider > .slides-outer > .slides li {width: 320px;}
.work-slider-inner {width: 320px;}
.work-slider-inner .mb-slider .slides li {width: 320px;}
.work-slider-inner .mb-slider .slides li > img {height: 347px; width: auto;}
.work-slider-inner .mb-slider .slides li .cover {height: 347px;}
.work-slider-inner .mb-slider .slides li .col-l {max-width: 280px; bottom: 90px; left: 20px;}
.work-slider-inner .mb-slider .slides li .phones {margin-left: 20px;}
.work-slider-inner .mb-slider .slides li .phone {width: 182px; height: 383px; margin-top: 24px; margin-left: 15px;}
.work-slider-inner .mb-slider .slides li .phone.single-phone {right: 113px;}
.work-slider-inner .mb-slider .slides li .phone .apppic {width: 158px; height: 273px; margin-top: 57px; margin-left: 15px;}
.work-slider-inner .arrows {width: 280px; right: 20px;}
.work-slider-inner .arrows .prev-arrow {display: none !important;}
.hidden {display: none !important; margin-top: -240px !important;}
.work-slider-inner .arrows a {margin-top: -150px;}
.work-slider-inner .mb-slider .slides li .col-l h3 {font-size: 34px; line-height: 36px;}
#work-slider > .arrows .prev-arrow {height: 347px; margin-top: -407px;}
#work-slider > .arrows .next-arrow {height: 347px; margin-top: -407px;}
#career h3 {margin-bottom: 20px !important;}
#career .morelink {margin-top: 40px !important;}
#career .link-outer {padding-top: 20px;}
.jobs {margin-top: -40px;}
#map {height: 400px;}
#map-canvas {height: 400px;}
#contact {height: 400px;}
#contact .inner > div {margin-top: -410px;}
#contact .morelink:last-of-type {display: block;}
#ux-camp .inner {height: 350px;}
#about h3,
#career h3,
#contact h3,
#ux-camp h2 {font-size: 58px; line-height: 58px;}
#contact h3 {margin-top: 32px !important;}
#career h3 {margin-top: 0px !important;}
#ux-camp h2 {margin-top: 70px !important;}
.copyright {margin-top: 80px; margin-bottom: 0px;}
#footer .social-media {float: left; /*margin-top: -220px;*/}
#footer .social-media img {margin-right: 28px; margin-left: 0px;}
.photographs {margin-top: 0px;}
}
[id="cookies"] {
font: 11px/15px Arial, sans-serif;
color: #666;
z-index: 999999;
padding:10px 70px 10px;
margin:0;
position: fixed;
bottom: 0;
left: 0;
background: #f5f5f5;
box-shadow: 0 1px 2px #ddd;
border-top: solid 1px #ddd;
}
[id="cookies"] a {
position: absolute;
right: 20px;
top: 8px;
text-decoration: underline;
}
[id="cookies"] a:hover {
text-decoration:none;
}