body,html {
    margin:0;
    padding:0;
    background:#000;
    height:100%;
    font-family:arial;
    overflow:hidden
}

a,a:visited,a:active {
    color:#ff8c00
}

table {
    color:#ccc
}

table td {
    vertical-align:top
}

img {
    border:0
}

ul {
    margin-bottom:10px
}
ul li {
    padding: 3px;
}

hr {
    margin-top:30px;
    margin-bottom:30px;
    border:1px solid #353A4C
}
.portfolio hr {
    display: none;
}

.workexperience table tr {
    height:60px
}

.workexperience table td img {
    max-width:150px;
    margin-left:10px
}

.workexperience p {
    float:left;
    clear:both;
    margin:0;
    margin-bottom:10px;
    font-style:italic
}

.mask {
    position:fixed;
    width:100%;
    height:100%;
    opacity:0;
    background-size:cover;
    z-index:10;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    transition:opacity 1s
}

.mask.industry {
    background-image:url(images/bg1.jpg);
    opacity:.7
}

.mask.balls {
    background-image:url(images/bg2.jpg);
    opacity:.7
}

#toolbar {
    position:absolute;
    top:-65px;
    color:#fff;
    font-size:2em;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    background: linear-gradient(to right,rgb(43, 48, 58) 40%,rgba(27,52,85,0) 100%);
}

#toolbar .margin {
    display:inline-block;
    width:282px;
    float:left
}

#mainWrapper {
    position:relative;
    height:100%;
    z-index:20
}

#verticalAlign {
    position:absolute;
    top:20%;
    height:65%;
    width:100%;
    min-height:400px;
    border-top:1px solid #111;
    border-bottom:1px solid #111;
    box-shadow:0 2px 14px 6px #000;
    background:rgba(0,0,0,0.7);
    z-index:30;
    -webkit-transition:min-height 1s,top 1s;
    -moz-transition:min-height 1s,top 1s;
    transition:min-height 1s,top 1s
}

#main {
    position:absolute;
    box-sizing:border-box;
    top:20px;
    bottom:20px;
    right:20px;
    left:270px;
    color:#ccc;
    background:rgba(0,0,0,0.6)
}

#navigation {
    position:relative;
    font-weight:700;
    float:left;
    color:#444;
    height:100%;
    width:250px;
    margin:0;
    padding:0;
    z-index:100;
    font-size:1.6em;
    background:rgba(0,0,0,0.9)
}

#navigation ul {
    position:relative;
    z-index:200;
    margin:0;
    padding:0;
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

#navigation li {
    position:relative;
    z-index:200;
    display:table-row;
    text-align:right;
    list-style:none;
    box-sizing:border-box;
    -webkit-transition:background 0.6s,color 1s,text-shadow 1s;
    -moz-transition:background 0.6s,color 1s,text-shadow 1s;
    transition:background 0.6s,color 1s,text-shadow 1s;
    border-top:3px solid transparent
}

#navigation li div {
    display:table-cell;
    padding-right:30px;
    vertical-align:middle;
    cursor:pointer
}

#navigation li:hover, #navigation li.active {
    background:rgba(100,00,40,0.6);
    background:rgba(25,38,50,1);
    color:#fff;
    border-top:3px solid #fff
}

label {
    float:left;
    width:100px;
    clear:both
}

value {
    float:left
}

.spacer {
    float:left;
    width:100%;
    height:20px
}

ul.bxslider {
    position:relative;
    height:100%;
    margin-top:0;
    z-index:50!important
}

ul.bxslider > li {
    position:relative;
    overflow-y:auto;
    height:100%
}

.bx-wrapper {
    margin:0 auto;
    height:100%
}

.bx-viewport {
    height:100%!important
}

.bx-wrapper .bx-viewport {
    border:0!important;
    background:transparent!important;
    box-shadow:none!important
}

.content {
    margin-left:20px;
    max-width:60%;
    font-size:1em;
    line-height:1.5em;
    padding-bottom:50px
}

::-webkit-scrollbar {
    height:12px;
    width:16px;
    background:#000
}

::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 3px rgba(50,50,50,0.3);
    border-radius:10px;
    background:#141414
}

::-webkit-scrollbar-thumb {
    background:grey;
    -webkit-border-radius:0;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px
}

::-webkit-scrollbar-thumb:hover {
    background:#aaa
}

::-webkit-scrollbar-corner {
    background:#000
}

.row {
    float:left;
    width:100%
}

.onlyMobile {
    display:none!important
}

h1,h2,h3,h4,h5 {
    clear:both
}

h2 {
/*border-bottom: 1px dashed grey;*/
    margin-top:0;
    background:linear-gradient(to right,rgba(53,58,76,1) 0%,rgba(27,52,85,0) 100%);
    padding: 10px;
}

.portfolio h3 {
    margin:5px;
    cursor:pointer;
    float:left;
    width:100%;
    -webkit-transition:margin-left .5s;
    -moz-transition:margin-left .5s;
    transition:margin-left .5s;
    background: #192938;
    padding: 10px;
    color: white;
    font-weight: normal;
}

.portfolio h3:hover {
    color:#fff;
    margin-left: 30px
}

.portfolio h4 {
    width:100%;
    float:left;
    margin-top:20px;
    margin-left:30px;
    margin-bottom:10px
}

.portfolio .section {
    border-left:10px solid #222
}

.portfolio p,.portfolio ul {
    float:left;
    clear:both;
    max-width:80%
}

p {
    margin-left:30px
}

p.inner,ul.inner,.inner30 {
    margin-top:0;
    margin-left:60px;
    background:#282828;
    padding:20px;
    border-radius:10px;
    width:60%;
    float:left
}

span.inner {
    margin-left:60px;
    margin-top:10px;
    display:block;
    float:left
}

ul.inner {
    padding-left:40px
}

.inner30 {
    float:left;
    margin-left:15px;
    padding-left:30px;
    clear:both;
    margin-bottom:30px
}

.thumbnail.small img {
    max-height:200px;
    float:right;
    margin-left:15px;
    box-shadow:0 0 5px #000
}

a.thumbnail.small.webdesign {
    background:#222;
    padding:20px 15px;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    height:200px
}

a.thumbnail.small.webdesign:hover {
    background:#333
}

a.thumbnail.small.webdesign .wrapper {
    max-width:200px;
    height:200px;
    overflow:hidden
}

.thumbnail.small.webdesign img {
    max-height:300px;
    width:auto;
    margin-left:0;
    overflow:hidden
}

.thumbnail.small.webdesign.phat img {
    min-height:150px
}

.baseInfo {
    float:left;
    width:70%
}

.hidden {
    display:none
}

div.hidden {
    float:left
}

#employeesAndCustomers h2 {
    float:left;
    width:100%;
    margin-top:40px
}

#employeesAndCustomers h4 {
    margin-top:30px
}

#facePhotoWrapper {
    float:right;
    width:25%;
    margin-top:25px;
    margin-right:25px
}

#verticalAlign.fill {
    top:0;
    height:100%;
    border:0
}

@media (max-height: 600px),(max-width: 1300px) {
#verticalAlign {
    top:0;
    height:100%;
    border:0
}

.content {
    max-width:90%
}

.onlyMobile {
    display:block!important
}

.noMobile {
    display:none!important
}

.content {
    font-size:1em!important
}

p.inner,ul.inner,.inner30 {
    width:80%
}

.workexperience img {
    margin:0!important;
    clear:both;
    float:left
}
}

@media (max-width: 1100px) {
.thumbnail.small img {
    margin-left:0;
    float:left;
    width:100%;
    clear:both;
    max-height:initial;
    margin-bottom:10px
}

#main {
    top:0;
    bottom:0;
    right:0;
    left:270px;
    padding-left:0!important
}
}

@media (max-width: 800px) {
.baseInfo {
    width:65%
}
}

@media (min-width: 680px) {
#bgVideo {
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto
}
}

@media (max-width: 680px) {
body {
    font-size:.75em!important
}

.baseInfo {
    font-size:.9em!important
}

#navigation {
    width:120px;
    height:65%;
    font-size:1em
}

#navigation li {
    text-align:center;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}

#navigation li div {
    padding-right:0;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}

#main {
    padding-top:10px;
    padding-left:0;
    left:130px;
    padding-bottom:100px
}

#bgVideo {
    display:none
}

.baseInfo {
    width:50%
}

#facePhotoWrapper {
    width:30%
}

label {
    width:65px
}

.spacer {
    height:10px
}
}

@media (max-width: 400px) {
#main {
    padding-left:0;
    left:0;
    padding-bottom:10px
}

#navigation {
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
    box-shadow:0 -5px 20px 8px #000;
    background:#000
}

#navigation ul li {
    display:table-cell;
    text-align:center;
    padding:0
}

#navigation ul li div {
    float:left;
    padding-top:15px;
    width:100%;
    color:#999
}

.baseInfo label {
    display:none
}
.portfolio ul.inner, .portfolio p.inner {
    margin-left:15px;
}

.portfolio hr {
    display: block;
    margin-bottom: 0;
}
}