@font-face {font-family: "ProximaNova"; src: url(ProximaNova-Light.otf); font-weight: 100;}
@font-face {font-family: "ProximaNova"; src: url(ProximaNova-Regular.otf); font-weight: 300;}
@font-face {font-family: "ProximaNova"; src: url(ProximaNova-Semibold.otf); font-weight: 600;}

/* Common */
html {margin: 0; padding: 0; height: 100%;}
body {margin: 0; padding: 0; font-family: "ProximaNova", Arial, sans-serif; background: #fff; color: #000; font-size: 15px; min-height: 100%}
.clear {clear: both; height: 0; overflow: hidden;}

a {color: #00a2ff; text-decoration: none; border-bottom: #9adcff 1px solid;
    -moz-transition: all 0.2s; -ms-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s;
    }
a:hover {border-bottom-color: #00a2ff;}
h1, h2, h3, h4, h5 {font-weight: 300; text-transform: uppercase;}
h1 {font-size: 50px; margin-top: 0; margin-bottom: 0.5em; line-height: 120%; font-weight: 100; letter-spacing: 2px;}
h2, h3 {font-size: 30px; line-height: 110%; margin: 0 0 1em 0;}
h4 {font-size: 18px; margin: 0 0 1em 0;}
input, select, textarea {font-family: "ProximaNova", Arial, sans-serif; font-size: 20px; font-weight; normal;}
p {line-height: 150%;}

.js-showonscroll {
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    }
.js-showonscroll.scrolledto {opacity: 1;
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    }

/* header noticication */
.header-notification {background: #f2f2f2; text-align: center; padding: 0.5em; color: #000; font-size: 13px; line-height: 140%; }
body.notification .header-notification {display: block;}
body.notification .page {padding-top: 151px;}
.header-notification a {color: #000; text-decoration: none; font-weight: bold; border: 0;}
.header-notification a:hover {color: #00a2ff;}

/* responsive columns */
.row {margin: 0 -30px;}
.row:after {content: ""; clear: both; display: block;}
.col, .col-right {padding: 0 30px; float: left; min-height: 1px;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
.col-right {float: right;}
.col-8 {width: 8.33%;}
.col-11 {width: 11%;}
.col-12 {width: 12.5%;}
.col-16 {width: 16.66%;}
.col-25 {width: 25%;}
.col-33 {width: 33.33%;}
.col-41 {width: 41.66%;}
.col-44 {width: 44%;}
.col-50 {width: 50%;}
.col-58 {width: 58.33%;}
.col-66 {width: 66.66%;}
.col-75 {width: 75%;}
.col-83 {width: 83.33%;}
.col-91 {width: 91.66%;}
@media screen and (max-width: 760px) {
    .col, .col-right {width: 100%; margin: 0 0 30px; padding: 0; }
    .row {margin: 0;}
    } 
.content {margin: 0 auto; width: 92%; max-width: 980px;}

/* layout */
.site {min-height: 100%;}
.header {background: #fff; position: fixed; left: 0; top: 0; width: 100%; z-index: 5;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.1);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
.header-main .header-content {position: relative; height: 80px;}
.header-indicies {font-size: 13px; padding: 4px 0; border-top: #e4e4e4 1px solid; line-height: 13px;}
.header .logo {width: 272px; height: 20px; position: absolute; top: 50%; margin-top: -10px; left: 0; border: 0;}
.header-menu {position: absolute; top: 50%; right: 0; font-size: 13px; line-height: 20px; margin-top: -10px;} 
.header-menu a {color: #000; border: 0; margin-left: 15px;}
.header-menu a:hover {color: #00a2ff;}
.header-menu a.active {font-weight: 600; position: relative;}
.header-menu a.active:after {position: absolute; top: -33px; left: 0; right: 0; content: ""; border-top: #000 2px solid;}
.header-menu-toggle {display: none;}
.header .logo-img {width: 272px; height: 20px;}
.header-index {display: inline-block; margin-right: 20px; font-size: 11px; color: #999; font-weight: 600;}
.header-index .change.negative {color: #b72424;}
.header-index .change.positive {color: #53b816;}

.page {padding-bottom: 250px; padding-top: 101px;}
.section {padding: 70px 0; font-size: 18px;}
@media screen and (max-width: 920px) {
    .section {font-size: 14px; padding: 40px 0;}
    body {font-size: 15px;}
    h1 {font-size: 30px;}
    h2, .section .subtitle {font-size: 22px;}
    h3 {font-size: 18px;}
    h4 {font-size: 18px;}
    } 

.footer {background: #000; height: 150px; margin-top: -150px; color: #fff; font-size: 13px; text-align: center; z-index: 5; position: relative; line-height: 150%;}
.footer-content {padding: 30px 0 0;}
.footer-links {margin-bottom: 1.5em;}
.footer-links a {color: #fff; border-color: transparent; margin: 0 20px; white-space: nowrap;}
.footer-links a:hover {border-color: rgba(255,255,255,0.4);}
.footer .image-info {color: #999;}
.footer .image-info a {color: #999; border-color: transparent;}
.footer .image-info a:hover {border-color: rgba(255,255,255,0.4);}

@media screen and (max-width: 950px) {
    .header .logo {width: 40px; overflow: hidden;}
    .homepage .header .logo {width: auto; overflow: hidden;}
    }

@media screen and (max-width: 760px) {
    .header .logo {width: auto;}
    .page {padding-bottom: 100px;}
    .footer {margin: 0; height: auto;}
    .footer-content {padding: 30px 0;}
    .header .logo {top: 10px; margin: 0;}
    .header-menu a.active:after {display: none;}
    .header-indicies {display: none;}

    .header-menu {display: none; position: static; margin-top: 40px; padding: 0;}
    .header-menu a {display: block; padding: 10px 0; margin: 0;}
    .header-main .header-content {height: auto; overflow: hidden; min-height: 40px;}
    .header-menu-toggle {display: block; padding: 0; margin: 0; width: 20px; height: 10px; border-top: #000 2px solid; position: absolute; right: 0; top: 20px; opacity: 0.4; border-bottom: 0;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        }
    .header-menu-toggle:before {content: ""; border-top: #000 2px solid; position: absolute; left: 0; width: 20px; height: 20px; top: -9px;}
    .header-menu-toggle:after {content: ""; border-top: #000 2px solid; position: absolute; left: 0; width: 20px; top: 5px;}
    .header-menu-toggle:hover {opacity: 1;}
    .homepage .header-menu {display: block;}
    .page {padding-top: 40px;}
    .homepage .page {padding-top: 80px;}
    } 


/* buttons */
.button {padding: 10px 50px; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; line-height: 120%;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    }
.button-ghost {background: transparent; color: #000; border: rgba(0,0,0,0.4) 1px solid;}
.button-ghost:hover {border-color: #000;}
.section-top .button-ghost {color: #fff; border: rgba(255,255,255,0.4) 1px solid;}
.section-top .button-ghost:hover {border-color: #fff;}
.calltoaction {margin: 30px 0;}

/* lists */
ul, ol {padding-left: 1.5em; line-height: 150%; margin-bottom: 3em;}
li {margin-bottom: 0.5em;}

/* homepage */
.homepage {background: #000;}
.homepage .site {background: #000 url(../images/climbing.jpg) 50% 50% no-repeat; background-size: cover;}
.homepage .page {color: #fff; text-align: center; position: relative; padding-bottom: 250px;}
.homepage h1 {margin: 2.5em 0 1.5em; font-size: 50px; line-height: 100%; font-weight: 100;}
.homepage-subtitle {font-size: 20px; margin: 0 0 3em 0; line-height: 140%;}
.homepage .image-link {position: absolute; bottom: 5px; left: 5px; opacity: 0.4; color: #fff; font-size: 10px;}
.homepage .image-link a {color: #fff; border: 0;}

.homepage-products {margin-top: 70px;}
.homepage-products-title {font-size: 20px; margin-bottom: 2em;}
.homepage-products a {display: inline-block; margin: 0; vertical-align: top; width: 20%; border: 0; color: #fff;}
.product-icon {width: 96px; height: 96px; display: block; margin: 0 auto; border: #fff 1px solid; margin-bottom: 1em;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    }
a:hover .product-icon {background: #fff;}
.icon {width: 96px; height: 96px; display: inline-block; background: url(../images/icons.png) 0 0 no-repeat; background-size: 384px 192px;}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
    .icon {background-image: url(../images/icons2x.png);}
    }
.icon-html5 {background-position: 0 0;}
a:hover .icon-html5 {background-position: 0 -96px;}
.icon-java {background-position: -96px 0;}
a:hover .icon-java {background-position: -96px -96px;}
.icon-pattern {background-position: -192px 0;}
a:hover .icon-pattern {background-position: -192px -96px;}
.icon-strategy {background-position: -288px 0;}
a:hover .icon-strategy {background-position: -288px -96px;}

@media screen and (max-width: 760px) {
    .homepage h1 {font-size: 30px;}
    .homepage-subtitle {font-size: 14px;}
    .homepage-products a {display: inline-block; margin: 0 auto 30px; width: 200px;}
    .homepage .page {padding-bottom: 50px;}
}

/* html5 page */
.html5-top {background: #000 url(../images/html5-back.jpg) 50% 50% no-repeat; background-size: cover; color: #fff;}
.html5-multiplatform {width: 100%;}
.html5-screen-section {padding-top: 0;}
.html5-screen {width: 70%; display: block; margin: 0 auto;
    -moz-box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    -ms-box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
.html5-features {padding: 50px; background: #f2f2f2;}
.html5-features .row {margin: 0 -40px;}
.html5-features .col {padding: 0 40px;}
.call-to-action {text-align: center; margin-top: 50px;}

/* java/.net page */
.java-top {background: #000 url(../images/java-back.jpg) 50% 50% no-repeat; background-size: cover; color: #fff;}
.java-top h1 {text-align: center;}
.java-top .subtitle {font-size: 30px; margin-bottom: 2em;}
.java-whyprochart {text-align: center; border-bottom: #e4e4e4 1px solid;}
.java-icon {display: block; background: url(../images/java-icons.png) 0 0 no-repeat; background-size: 600px 200px; width: 300px; height: 200px; margin: 0 auto 2em;}
.icon-speedometer {background-position: 0 0;}
.icon-development {background-position: -300px 0;}
.java-features {padding: 50px; background: #f2f2f2; position: relative; font-size: 15px; line-height: 140%;}
.java-features h2 {position: relative;}
.java-features .java-screen {width: 545px; height: 653px; background: url(../images/java-screen.jpg); background-size: 545px 653px; 
    position: absolute; right: 0; top: -22px;
    }
.java-features .row {margin: 0 -40px;}
.java-features .col {padding: 0 40px;}
.java-features .col-padded {padding-top: 600px;}
.java-features strong {display: block; margin: 0 0 1em 0;}
.java-features-section {margin-bottom: 3em;}
@media screen and (max-width: 920px) {
    .java-features .java-screen {width: 300px; height: 359px; background-size: 300px 359px; right: 10px; top: -11px;}   
    .java-features .col-padded {padding-top: 300px;} 
}

@media screen and (max-width: 760px) {
    .java-features .java-screen {display: none;}   
    .java-features .col-padded {padding-top: 0;} 
}

/* patterns */
.patterns-top {background: #000 url(../images/patterns-back.jpg) 50% 50% no-repeat; background-size: cover; color: #fff; text-align: center;}
.patterns-top .subtitle {font-size: 30px; margin: 2em 0 11em;}
.patterns-history {background: #f2f2f2; padding: 20px 40px; margin-top: -50px; font-style: italic;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
.patterns-alchemy h2 {text-align: center;}
.patterns-alchemy-img {width: 100%; margin: 1em 0;}
.patterns-patterns {text-align: center;}

.js-imageband {position: relative; height: 300px; overflow: hidden;}
.js-imageband-items {display: block; position: absolute; height: 100%; z-index: 1; left: 0; top: 0;
    -moz-transition: left 0.3s;
    -ms-transition: left 0.3s;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    }
.js-imageband-item {float: left; cursor: pointer; padding-left: 5px; position: relative; padding: 0 10px; opacity: 0.5;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    }
.js-imageband-item.current, .js-imageband-item:hover {opacity: 1;}
.js-imageband-item img {max-height: 100%; width: auto; display: block; oposition: relative; z-index: 2;
    -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    -ms-box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
.js-imageband-links {position: absolute; z-index: 2; bottom: 0; white-space: nowrap;
    -moz-transition: left 0.3s;
    -ms-transition: left 0.3s;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
    }
.js-imageband-links a {margin-right: 20px; font-size: 16px;}
.js-imageband-links a.active {color: #000; border: 0;}

@media screen and (max-width: 760px) {
    .js-imageband {height: 200px;}
    .js-imageband-item img {width: 300px;}
    .js-imageband-links a {font-size: 13px;}
}

/* strategy and test */
.strategy-top {background: #000 url(../images/strategy-back.jpg) 50% 50% no-repeat; background-size: cover; color: #fff;}
.strategy-top a {color: #fff; border-bottom: rgba(255,255,255,0.4) 1px solid;}
.strategy-top a:hover {border-bottom-color: #fff;}
.strategy-description {background: #f2f2f2; padding: 20px; margin-top: 40px; text-align: center; 
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
.strategy-brand h2 {text-align: center;}
.strategy-insouts .sample {display: block; margin: 0.5em 0; padding: 0.5em 1.5em; background: #f2f2f2;}
.strategy-screen-1 {display: block; width: 80%; margin: 1em auto;
    -moz-box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    -ms-box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
.strategy-more {position: relative;}
.strategy-more-text {position: relative; z-index: 2;}
.strategy-more-text .call-to-action {text-align: left;}
.strategy-screen-2 {position: absolute; right: 0; bottom: -100px; width: 40%;}


@media screen and (max-width: 760px) {
    .html5-top {background-position: 0 50%;}
    .html5-multiplatform {width: 60%; margin: 0 auto; display: block;}
    .java-top {background-position: 0 50%;}
    .strategy-top {background-position: 0 50%;}
    .patterns-top .subtitle {font-size: 22px;}
    } 

/* misc pages */
.page-misc h1 {margin: 1em 0; font-size: 40px;}
.page-misc h2 {margin: 1em 0;}
.misc-intro {padding: 1.5em; background: #f2f2f2;}