@font-face {
    font-family: SourceSansProRegular;
    src: url(../fonts/SourceSansPro-Regular.ttf) format("truetype");
}

@font-face {
    font-family: SourceSansProBold;
    src: url(../fonts/SourceSansPro-Bold.ttf) format("truetype");
}

@font-face {
    font-family: SourceSansProBlack;
    src: url(../fonts/SourceSansPro-Black.ttf) format("truetype");
}

@font-face {
    font-family: SourceSansProLight;
    src: url(../fonts/SourceSansPro-Light.ttf) format("truetype");
}

body, html {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}

body {
    background-color:#ebebef;
    font-family:SourceSansProRegular, Helvetica, HelveticaNeue, Arial, sans-serif;
}

.fixed_right {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
}

.masthead p a {
    color:#fff;
    opacity:0.5;
    
}

/* Normal screens */
@media all and (min-width: 1080px) {
    
    .rightpanel {
        width:320px;
        position:absolute;
        top:150px;
        right:0px;
    }
    .rightpanel .archive {
        
        padding:10px;
    }
    
    ul {
        list-style-type: none;
        margin:0px;
        padding:0px;
    }
    
    ul.bullet {
        list-style-type:disc;
        font-size:15px;
        margin-top:20px;
    }
    
    
    ul li {
        margin:6px 0px 6px 0px;
    }
    
    ul.bullet li {
        margin:4px 0px 4px 32px;
    }
    
    ul li .link {
        overflow-x:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        font-size:14px;
        
    }
    
    ul li .date {
        color:#888;
        text-align:left;
        font-size:13px;
        margin-top:10px;
    }
    
    ul li a {
        color:#0d66b2;
        text-decoration:none;
    }
    ul li a:hover {
        text-decoration:underline;
    }
    
    
    .mid, .post {
        width:1080px;
        margin:0px auto 0px auto;
        position:relative;
    }
    
    .header {
        z-index:10;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        height:175px;
        background-image:url(../images/header_bg.png);
        background-repeat:repeat-x;
    }
    .header .logo {
        margin:20px 0px 0px 0px;
        width:254px;
        height:95px;
        background-image:url(../images/logo_13.png);
        background-repeat:no-repeat;
        cursor:pointer;
    }
    
    .firstitem {
        margin-top:139px;
    }
    
    
    .masthead {
        position:relative;
        height:628px;
        /*background-image:url(../images/masthead_bg.jpg);*/
        background-color:#3b5998; /*#116bb4;*/
        background-position:50% 50%;
    }
    
    .rescape.masthead {
        position:relative;
        height:628px;
        background-image:url(../images/masthead_rescape_bg.jpg);
        background-position:100% 0%;
    }
    
    .masthead .mid {
        height:100%;
    }
    
    .masthead .left {
        width:580px;
        
    }
    
    .masthead .team_image {
        position:absolute;
        right:0px;
        top:180px;
        background-image:url(../images/team.jpg);
        width:435px;
        height:290px;
        border:10px white solid;
        box-shadow:0px 5px 15px rgba(0,0,0, 0.3);
    }
    
    .masthead h1 {
        font-weight:normal;
        padding-top:120px;
        font-family:SourceSansProBlack;
        font-size:40px;
        color:#fff;
        padding-bottom:0px;
        margin-bottom:10px;
        /*text-shadow:0px 1px 3px rgba(0,0,0, 0.5);*/
    }
    
    .masthead p {
        margin-top:0px;
        padding-top:0px;
        color:#fff;
        opacity:0.75;
        /*text-shadow:0px 1px 3px rgba(0,0,0, 0.5);*/
        font-size:16px;
    }
    

    
    .masthead p.minor {
        text-align:center;
        font-size:16px;
        font-family:SourceSansProBold;
        font-weight:normal:
    }
    
    .masthead #mainvideo_button {
        margin:50px auto 10px auto;
        width:204px;
        height:204px;
        cursor:pointer;
        background-image:url(../images/play_large.png);
    }
    .masthead #mainvideo_button:hover {
        background-image:url(../images/play_large_hover.png);
    }
    

    
    .masthead #kickstarter_button {
        position:relative;
        font-family:SourceSansProRegular;
        font-size:22px;
        text-align:center;
        margin:50px 0px 10px 0px;
        width:280px;
        padding:20px 20px 20px 0px;
        background-color:#007242;
        border-radius:4px;
        color:white;
        cursor:pointer;
    }
    
    .masthead #kickstarter_button:hover {
        background-color:#004b2b;
    }
    
    .masthead #kickstarter_button #kickstarter_arrow {
        width:26px;
        height:26px;
        position:absolute;
        right:54px;
        top:22px;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:26px auto;
        background-image:url(../images/kickstarter_arrow.png);
    }


    
    
    .masthead .hand {
        position:absolute;
        right:0px;
        bottom:0px;
        width:496px;
        height:512px;
        background-image:url(../images/hand.png);
    }
    
    
    .section {
        padding:20px 0px 50px 0px;
        background-color:#fff;
    }
    
    
    
    .section.down {
        background-color:#f8f8f8;
        background-image:url(../images/footer_shadow.png);
        background-repeat:repeat-x;
    }
    
    
    .section.bordered {
        border-top:2px #ddd dotted;
    }
    
    .section h1 {
        text-align:center;
        color:#0d66b2;
        font-family:SourceSansProLight;
        font-weight:normal;
        font-size:48px;
        margin-top:30px;
        margin-bottom:5px;
    }
    
    .section h2 {
        font-family:SourceSansProLight;
        font-size:22px;
        color:#191919;
        font-weight:normal;
        text-align:center;
        margin-top:5px;
        margin-bottom:60px;
    }
    
    a {
        color:#0d66b2;
        text-decoration:none;
        font-family:SourceSansProRegular;
    }
    
    a:hover {
        text-decoration:underline;
    }
    
    .section .row.body {
        padding-bottom:20px;
        border-bottom:2px #ddd dotted;
    }
    
    .section .post a {
        text-decoration:none;
        color:#0d66b2;
    }
    
    .section .post a:hover {
        text-decoration:underline;
    }
    
    .section .post .row {
        width:700px;
        font-family:SourceSansProRegular;
        font-size:16px;
        color:#191919;
    }
    
    .section .post .date {
        position:absolute;
        top:0px;
        left:0x;
        width:54px;
        height:54px;
        
        background-color:#fb3900;
        color:#fff;
        background-image:url(../images/date_bg.png);
        text-align:center;
    }
    
    .section a.anchor {
        position:absolute;
        top:-159px;
    }
    
    .section .post .date .inner {
        margin-top:5px;
    }
    
    .section .post .date .inner .m {
        font-family:SourceSansProRegular;
        font-size:14px;
        margin-top:4px;
    }
    .section .post .date .inner .d {
        font-family:SourceSansProBlack;
        font-size:22px;
        margin-top:-6px;
    }
    
    
    .section .post .author {
        margin-left:75px;
        margin-top:-5px;
        color:#888888;
        font-size:14px;
    }
    
    .section h3 {
        text-align:left;
        color:#0d66b2;
        font-family:SourceSansProLight;
        font-weight:normal;
        font-size:28px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    .section h4 {
        text-align:left;
        font-size:20px;
        padding:0px;
        font-family:SourceSansProBold;
        color:#fb3900;
        
        font-weight:normal;
        font-size:20px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    .section .post h3 {
        margin-left:75px;
    }
    .section .post h3 a {
        text-decoration:none;
        color:#0d66b2;
    }
    
    .section .post .row.body {
        margin-top:40px;
    }
    
    .section .aboutimage {
        border-radius:4px;
        margin-bottom:20px;
        width:500px;
    }
    
    .section .aboutimage.right {
        float:right;
        margin-left:70px;
    }
    .section .aboutimage.left {
        float:left;
        margin-right:70px;
    }
    
    
    .section .smallvideo {
        float:left;
        width:250px;
        height:196px;
        background-color:#555;
        background-position:50% 51%;
        margin:0px 0px 0px 25px;
        position:relative;
        border-radius:4px;
        background-size:520px auto;
    }
    
    .section .news_post .smallvideo {
        margin:0px 0px 10px 0px;
        width:470px;
        height:340px;
        background-size:640px auto;
    }
    
    .section .smallvideo:first-child {
        margin-left:0px;
    }
    
    .section .smallvideo .playbutton {
        position:absolute;
        top:50%;
        left:50%;
        width:75px;
        height:75px;
        background-image:url(../images/play_small.png);
        margin-top:-38px;
        margin-left:-38px;
        cursor:pointer;
    }
    
    .section .smallvideo .playbutton:hover {
        background-image:url(../images/play_small_hover.png);
    }
    
    .section .smallvideo:first-child {
        margin-left:0px;
    }
    
    .header .links {
        position:absolute;
        top:38px;
        right:0px;
        text-align:right;
    }
    
    .header .links a {
        margin-left:30px;
        font-family:SourceSansProBold;
        font-weight:normal;
        color:#03345a;
        font-size:18px;
        text-decoration:none;
    }
    .header .links a span {
        color:#fb3900;
        font-family:SourceSansProLight;
    }
    
    .header .links a:hover {
        text-decoration:underline;
    }
    
    .section .section_content {
        
    }
    
    .section .section_content h1 {
        font-size:24px;
        margin:10px 0px 0px 0px;
        padding:0px;
        font-family:SourceSansProBold;
        color:#fb3900;
    }
    
    
    .section .section_content p {
        font-size:15px;
        margin:10px 10px 0px 10px;
        padding:0px;
        font-family:SourceSansProRegular;
        color:#444444;
        text-align:center;
    }
    
    .section p {
        font-size:15px;
        padding:0px;
        font-family:SourceSansProRegular;
        color:#191919;
        
    }
    
    
    .section .techsection {
        float:left;
        width:350px;
        margin-left:10px;
    }
    
    .section .techsection :first-child {
        margin-left:0px;
    }
    
    
    .section .techsection .icon {
        width:172px;
        height:172px;
        margin:0px auto 0px auto;
        background-image:url(../images/o_icons.png);
        background-position:0px 0px;
    }
    
    .section .techsection .icon#icon_imagerecognition {
        background-position:0px 0px;
    }
    
    .section .techsection .icon#icon_slam {
        background-position:-172px 0px;
    }
    
    .section .techsection .icon#icon_coming {
        background-position:-344px 0px;
    }
    
    
    .section .app {
        float:left;
        width:49%;
        margin-bottom:20px;
        position:relative;
    }
    
    .section .app .icon {
        width:144px;
        height:144px;
        background-size:288px auto;
        border-radius:6px;
        cursor:pointer;
        background-image:url(../images/appicons.png);
    }
    
    .section .app .title {
        position:absolute;
        top:2px;
        left:170px;
        bottom:0px;
        right:20px;
        color:#fb3900;
        font-family:SourceSansProBold;
        font-size:24px;
    }
    .section .app .subtext {
        position:absolute;
        top:35px;
        left:170px;
        bottom:0px;
        right:50px;
        font-size:13px;
        font-family:SourceSansProRegular;
        color:#444444;
    }
    
    .section .app .subtext p {
        text-align:left;
        font-size:14px;
        margin-left:0px;
        padding-left:0px;
    }
    
    .section .app .subtext a {
        color:#0d66b3;
        text-decoration:none;
    }
    .section .app .subtext a:hover {
        text-decoration:underline;
    }
    
    .section .app .subtext .dev {
        font-family:SourceSansProBold;
    }
    
    .section .app .icon#icon_app_sdk {
        background-position:0px 0px;
    }
    .section .app .icon#icon_app_browser {
        background-position:-144px 0px;
    }
    .section .app .icon#icon_app_mcr {
        background-position:0px -144px;
    }
    .section .app .icon#icon_app_ballinvasion {
        background-position:-144px -144px;
    }
    
    
    .footer {
        background-color:#ebebef;
        padding-top:50px;
        padding-bottom:80px;
        background-image:url(../images/footer_shadow.png);
        background-repeat:repeat-x;
    }
    
    .footer .links {
        text-align:center;
        color:#888;
    }
    
    .footer .links a {
        font-family:SourceSansProRegular;
        font-size:16px;
        margin-left:20px;
        margin-right:20px;
        color:#0d66b2;
        text-decoration:none;
    }
    .footer .links a:hover {
        text-decoration:underline;
    }
    
    .footer p {
        margin-top:30px;
        font-size:14px;
        font-family:SourceSansProRegular;
        color:#191919;
        text-align:center;
    }
    
    .col4 {
        float:left;
        width:21%;
        margin-left:5%;
    }
    .col4:first-child {
        margin-left:0px;
    }
    
    .col4 p {
        color:#191919;
        font-family:SourceSansProRegular;
        font-size:15px;
        margin-bottom:6px;
        
    }
    
    .col4 p.author {
        font-family:SourceSansProBold;
        font-size:16px;
        color:#fb3900;
    }
    
    .col4 .fp_q {
        float:left;
        font-family:Georgia, Times New Roman, serif;
        font-size:64px;
        height:32px;
        margin-right:10px;
        margin-top:-5px;
        color:#ccc;
    }
    
    .logos {
        margin-bottom:50px;
        margin-top:80px;
    }
    
    .logos a {
        display:block;
        width:25%;
        height:90px;
        float:left;
        background-position:50% 50%;
        background-repeat:no-repeat;
        cursor:pointer;
    }
    
    
    #videocover {
        display:none;
        z-index:12;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        background-image:url(../images/videocover.png);
        background-repeat:repeat;
    }
    
    #videocover iframe {
        position:absolute;
        top:0px;
        left:0px;
    }
    
    #videocover .closevideo {
        position:absolute;
        right:-33px;
        top:-28px;
        width:66px;
        height:66px;
        cursor:pointer;
        background-image:url(../images/closevideo.png);
    }
    #videocover .closevideo:hover {
        background-image:url(../images/closevideo_hover.png);
    }
}

/* iPad screens */
@media all and (min-width: 768px) and (max-width:1079px) {
    
    .rightpanel {
        width:240px;
        position:absolute;
        top:150px;
        right:0px;
    }
    .rightpanel .archive {
        
        padding:10px;
    }
    
    ul {
        list-style-type: none;
        margin:0px;
        padding:0px;
    }
    
    ul.bullet {
        list-style-type:disc;
        font-size:15px;
        margin-top:20px;
    }
    
    
    ul li {
        margin:6px 0px 6px 0px;
    }
    
    ul.bullet li {
        margin:4px 0px 4px 32px;
    }
    
    ul li .link {
        overflow-x:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        font-size:14px;
        
    }
    
    ul li .date {
        color:#888;
        text-align:left;
        font-size:13px;
        margin-top:10px;
    }
    
    ul li a {
        color:#0d66b2;
        text-decoration:none;
    }
    ul li a:hover {
        text-decoration:underline;
    }
    
    
    .mid, .post {
        width:728px;
        margin:0px auto 0px auto;
        position:relative;
    }
    
    .header {
        z-index:10;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        height:175px;
        background-image:url(../images/header_bg.png);
        background-repeat:repeat-x;
    }
    .header .logo {
        margin:20px 0px 0px 0px;
        width:254px;
        height:95px;
        background-image:url(../images/logo_13.png);
        background-repeat:no-repeat;
        cursor:pointer;
    }
    
    .firstitem {
        margin-top:139px;
    }
    
    .masthead {
        position:relative;
        height:440px;
        /*background-image:url(../images/masthead_bg.jpg);*/
        background-color:#3b5998;
        
        background-position:50% 0%;
        -webkit-background-size:auto 480px;
    }
    
    .rescape.masthead {
        position:relative;
        height:440px;
        background-image:url(../images/masthead_rescape_bg.jpg);
        background-position:100% 0%;
        -webkit-background-size:auto 480px;
    }
    
    .masthead .team_image {
        position:absolute;
        right:0px;
        top:100px;
        background-image:url(../images/team.jpg);
        width:335px;
        height:223px;
        background-size:335px auto;
        border:5px white solid;
        box-shadow:0px 3px 10px rgba(0,0,0, 0.3);
    }
    
    
    .masthead .mid {
        height:100%;
    }
    
    .masthead .left {
        width:350px;
        
    }
    
    .masthead h1 {
        font-weight:normal;
        padding-top:40px;
        font-family:SourceSansProBold;
        font-size:26px;
        color:#fff;
        text-shadow:0px 1px 3px rgba(0,0,0, 0.5);
    }
    
    .masthead p {
        color:#fff;
        /*text-shadow:0px 1px 3px rgba(0,0,0, 0.5);*/
        font-size:12px;
    }
    
    .masthead p.minor {
        text-align:center;
        font-size:16px;
        font-weight:bold;
    }
    
    .masthead #kickstarter_button {
        position:relative;
        font-family:SourceSansProRegular;
        font-size:16px;
        text-align:center;
        margin:30px 0px 10px 0px;
        width:240px;
        padding:20px 20px 20px 0px;
        background-color:#007242;
        border-radius:4px;
        color:white;
        cursor:pointer;
    }
    
    .masthead #kickstarter_button:hover {
        background-color:#004b2b;
    }
    
    .masthead #kickstarter_button #kickstarter_arrow {
        width:26px;
        height:26px;
        position:absolute;
        right:60px;
        top:18px;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:20px auto;
        background-image:url(../images/kickstarter_arrow.png);
    }
    
    .masthead #mainvideo_button {
        margin:20px auto 10px auto;
        width:140px;
        height:140px;
        cursor:pointer;
        background-size:140px;
        background-image:url(../images/play_large.png);
    }
    .masthead #mainvideo_button:hover {
        background-image:url(../images/play_large_hover.png);
    }
    
    .masthead #kickstarter_button {
        position:relative;
        font-family:SourceSansProRegular;
        font-size:16px;
        text-align:center;
        margin:30px 0px 10px 0px;
        width:240px;
        padding:20px 20px 20px 0px;
        background-color:#007242;
        border-radius:4px;
        color:white;
        cursor:pointer;
    }
    
    .masthead #kickstarter_button:hover {
        background-color:#004b2b;
    }
    
    .masthead #kickstarter_button #kickstarter_arrow {
        width:26px;
        height:26px;
        position:absolute;
        right:60px;
        top:18px;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:20px auto;
        background-image:url(../images/kickstarter_arrow.png);
    }

    
    
    .masthead .hand {
        position:absolute;
        right:0px;
        bottom:0px;
        width:390px;
        height:400px;
        background-size:390px auto;
        background-image:url(../images/hand.png);
    }
    
    
    .section {
        padding:20px 0px 50px 0px;
        background-color:#fff;
    }
    
    .section.news_post {
        padding:10px 0px 10px 0px;
    }
    
    .section.down {
        background-color:#f8f8f8;
        background-image:url(../images/footer_shadow.png);
        background-repeat:repeat-x;
    }
    
    
    .section.bordered {
        border-top:2px #ddd dotted;
    }
    
    .section h1 {
        text-align:center;
        color:#0d66b2;
        font-family:SourceSansProLight;
        font-weight:normal;
        font-size:42px;
        margin-top:30px;
        margin-bottom:5px;
    }
    
    .section h2 {
        font-family:SourceSansProLight;
        font-size:22px;
        color:#191919;
        font-weight:normal;
        text-align:center;
        margin-top:5px;
        margin-bottom:60px;
    }
    
    a {
        color:#0d66b2;
        text-decoration:none;
        font-family:SourceSansProRegular;
    }
    
    a:hover {
        text-decoration:underline;
    }
    
    .section .row.body {
        padding-bottom:20px;
        border-bottom:2px #ddd dotted;
    }
    
    .section .post a {
        text-decoration:none;
        color:#0d66b2;
    }
    
    .section .post a:hover {
        text-decoration:underline;
    }
    
    .section .post .row {
        width:470px;
        font-family:SourceSansProRegular;
        font-size:16px;
        color:#191919;
    }
    
    .section .post .date {
        position:absolute;
        top:0px;
        left:0x;
        width:54px;
        height:54px;
        
        background-color:#fb3900;
        color:#fff;
        background-image:url(../images/date_bg.png);
        text-align:center;
    }
    
    .section a.anchor {
        position:absolute;
        top:-159px;
    }
    
    .section .post .date .inner {
        margin-top:5px;
    }
    
    .section .post .date .inner .m {
        font-family:SourceSansProRegular;
        font-size:14px;
        margin-top:4px;
    }
    .section .post .date .inner .d {
        font-family:SourceSansProBlack;
        font-size:22px;
        margin-top:-6px;
    }
    
    
    .section .post .author {
        margin-left:75px;
        margin-top:-5px;
        color:#888888;
        font-size:14px;
    }
    
    .section h3 {
        text-align:left;
        color:#0d66b2;
        font-family:SourceSansProLight;
        font-weight:normal;
        font-size:28px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    .section h4 {
        text-align:left;
        font-size:20px;
        padding:0px;
        font-family:SourceSansProBold;
        color:#fb3900;
        
        font-weight:normal;
        font-size:20px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    .section .post h3 {
        margin-left:75px;
    }
    .section .post h3 a {
        text-decoration:none;
        color:#0d66b2;
    }
    
    .section .post .row.body {
        margin-top:40px;
    }
    
    .section .aboutimage {
        border-radius:4px;
        margin-bottom:40px;
        width:300px;
    }
    
    .section .aboutimage.right {
        float:right;
        margin-left:70px;
    }
    .section .aboutimage.left {
        float:left;
        margin-right:70px;
    }
    
    
    
    .section .smallvideo {
        float:left;
        width:174px;
        height:136px;
        background-color:#555;
        background-position:50% 51%;
        margin:0px 0px 0px 10px;
        position:relative;
        border-radius:4px;
        background-size:350px auto;
    }
    
    .section .news_post .smallvideo {
        margin:0px 0px 10px 0px;
        width:470px;
        height:340px;
        background-size:640px auto;
    }
    
    
    .section .smallvideo:first-child {
        margin-left:0px;
    }
    
    .section .smallvideo .playbutton {
        position:absolute;
        top:50%;
        left:50%;
        width:75px;
        height:75px;
        background-image:url(../images/play_small.png);
        margin-top:-38px;
        margin-left:-38px;
        cursor:pointer;
    }
    
    .section .smallvideo .playbutton:hover {
        background-image:url(../images/play_small_hover.png);
    }
    
    .section .smallvideo:first-child {
        margin-left:0px;
    }
    
    .header .links {
        position:absolute;
        top:38px;
        right:0px;
        text-align:right;
    }
    
    .header .links a {
        margin-left:30px;
        font-family:SourceSansProBold;
        font-weight:normal;
        color:#03345a;
        font-size:18px;
        text-decoration:none;
    }
    .header .links a span {
        color:#fb3900;
        font-family:SourceSansProLight;
    }
    
    .header .links a:hover {
        text-decoration:underline;
    }
    
    .section .section_content {
        
    }
    
    .section .section_content h1 {
        font-size:24px;
        margin:10px 0px 0px 140px;
        padding:0px;
        font-family:SourceSansProBold;
        color:#fb3900;
        text-align:left;
    }
    
    
    .section .section_content p {
        font-size:15px;
        margin:10px 10px 0px 140px;
        padding:0px;
        font-family:SourceSansProRegular;
        color:#444444;
        text-align:left;
    }
    
    .section p {
        font-size:15px;
        padding:0px;
        font-family:SourceSansProRegular;
        color:#191919;
        
    }
    
    
    .section .techsection {
        position:relative;
        margin-bottom:4px;
        padding-bottom:20px;
        
    }
    
    .section .techsection :first-child {
        margin-left:0px;
    }
    
    
    .section .techsection .icon {
        width:100px;
        height:100px;
        position:absolute;
        top:0px;
        left:0px;
        background-size:300px auto;
        margin:0px auto 0px auto;
        background-image:url(../images/o_icons.png);
        background-position:0px 0px;
    }
    
    .section .techsection .icon#icon_imagerecognition {
        background-position:0px 0px;
    }
    
    .section .techsection .icon#icon_slam {
        background-position:-100px 0px;
        top:10px;
    }
    
    .section .techsection .icon#icon_coming {
        background-position:-200px 0px;
    }
    
    
    .section .app {
        margin-bottom:20px;
        position:relative;
    }
    
    .section .app .icon {
        width:144px;
        height:144px;
        background-size:288px auto;
        border-radius:6px;
        cursor:pointer;
        background-image:url(../images/appicons.png);
    }
    
    .section .app .title {
        position:absolute;
        top:10px;
        left:170px;
        bottom:0px;
        right:20px;
        color:#fb3900;
        font-family:SourceSansProBold;
        font-size:24px;
    }
    .section .app .subtext {
        position:absolute;
        top:50px;
        left:170px;
        bottom:0px;
        right:50px;
        font-size:14px;
        font-family:SourceSansProRegular;
        color:#444444;
    }
    
    .section .app .subtext p {
        text-align:left;
        font-size:14px;
        margin-left:0px;
        padding-left:0px;
    }
    
    .section .app .subtext a {
        color:#0d66b3;
        text-decoration:none;
    }
    .section .app .subtext a:hover {
        text-decoration:underline;
    }
    
    .section .app .subtext .dev {
        font-family:SourceSansProBold;
    }
    
    .section .app .icon#icon_app_sdk {
        background-position:0px 0px;
    }
    .section .app .icon#icon_app_browser {
        background-position:-144px 0px;
    }
    .section .app .icon#icon_app_mcr {
        background-position:0px -144px;
    }
    .section .app .icon#icon_app_ballinvasion {
        background-position:-144px -144px;
    }
    
    
    .footer {
        background-color:#ebebef;
        padding-top:50px;
        padding-bottom:80px;
        background-image:url(../images/footer_shadow.png);
        background-repeat:repeat-x;
    }
    
    .footer .links {
        text-align:center;
        color:#888;
    }
    
    .footer .links a {
        font-family:SourceSansProRegular;
        font-size:16px;
        margin-left:20px;
        margin-right:20px;
        color:#0d66b2;
        text-decoration:none;
    }
    .footer .links a:hover {
        text-decoration:underline;
    }
    
    .footer p {
        margin-top:30px;
        font-size:14px;
        font-family:SourceSansProRegular;
        color:#191919;
        text-align:center;
    }
    
    .col4 {
        float:left;
        width:21%;
        margin-left:5%;
    }
    .col4:first-child {
        margin-left:0px;
    }
    
    .col4 p {
        color:#191919;
        font-family:SourceSansProRegular;
        font-size:15px;
        margin-bottom:6px;
        
    }
    
    .col4 p.author {
        font-family:SourceSansProBold;
        font-size:16px;
        color:#fb3900;
    }
    
    .col4 .fp_q {
        float:left;
        font-family:Georgia, Times New Roman, serif;
        font-size:64px;
        height:32px;
        margin-right:10px;
        margin-top:-5px;
        color:#ccc;
    }
    
    .logos {
        margin-bottom:50px;
        margin-top:80px;
    }
    
    .logos a {
        display:block;
        width:25%;
        height:90px;
        float:left;
        background-position:50% 50%;
        background-repeat:no-repeat;
        cursor:pointer;
    }
    
    
    #videocover {
        display:none;
        z-index:12;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        background-image:url(../images/videocover.png);
        background-repeat:repeat;
    }
    
    #videocover iframe {
        position:absolute;
        top:0px;
        left:0px;
    }
    
    #videocover .closevideo {
        position:absolute;
        right:-33px;
        top:-28px;
        width:66px;
        height:66px;
        cursor:pointer;
        background-image:url(../images/closevideo.png);
    }
    #videocover .closevideo:hover {
        background-image:url(../images/closevideo_hover.png);
    }
}






/* Mobile phone screens */
@media all and (max-width:767px) {
    
    .rightpanel {
        display:none;
    }
    .rightpanel .archive {
        
        padding:10px;
    }
    
    ul {
        list-style-type: none;
        margin:0px;
        padding:0px;
    }
    
    ul.bullet {
        list-style-type:disc;
        font-size:15px;
        margin-top:20px;
    }
    
    
    ul li {
        margin:6px 0px 6px 0px;
    }
    
    ul.bullet li {
        margin:4px 0px 4px 32px;
    }
    
    ul li .link {
        overflow-x:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        font-size:14px;
        
    }
    
    ul li .date {
        color:#888;
        text-align:left;
        font-size:13px;
        margin-top:10px;
    }
    
    ul li a {
        color:#0d66b2;
        text-decoration:none;
    }
    ul li a:hover {
        text-decoration:underline;
    }
    
    
    .mid, .post {
        width:300px;
        margin:0px auto 0px auto;
        position:relative;
    }
    
    .header {
        z-index:10;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        height:130px;
        background-image:url(../images/header_bg.png);
        background-position-y:100%;
        background-repeat:repeat-x;
    }
    .header .logo {
        margin:10px 0px 0px 0px;
        width:100px;
        height:40px;
        background-size:100px auto;
        background-image:url(../images/logo_13.png);
        background-repeat:no-repeat;
        cursor:pointer;
    }
    
    .firstitem {
        margin-top:90px;
    }
    
    .masthead {
        position:relative;
        height:300px;
        /*background-image:url(../images/masthead_bg.jpg);*/
        background-color:#3b5998;
        
        background-position:50% 100%;
        -webkit-background-size:auto 240px;
    }
    
    
    .rescape.masthead {
        position:relative;
        height:180px;
        background-image:url(../images/masthead_rescape_bg.jpg);
        background-position:100% 0%;
        -webkit-background-size:auto 240px;
    }
    
    .masthead .mid {
        height:100%;
        width:320px;
    }
    
    .masthead .left {
        width:300px;
        margin-left:10px;
        
    }
    
    .masthead h1 {
        /*display:none;*/
        font-weight:normal;
        padding-top:20px;
        font-family:SourceSansProBold;
        font-size:16px;
        color:#fff;
        text-shadow:0px 1px 3px rgba(0,0,0, 0.5);
        
    }
    
    
    .masthead .team_image {
        display:none;
        position:absolute;
        right:0px;
        top:20px;
        background-image:url(../images/team.jpg);
        width:86px;
        height:58px;
        background-size:86px auto;
        border:2px white solid;
        box-shadow:0px 2px 10px rgba(0,0,0, 0.3);
    }
    
    .masthead p {
        font-size:10px;
        color:#fff;
        opacity:0.75;
        /*display:none;*/
    }
    
    .masthead #mainvideo_button {
        position:absolute;
        top:40px;
        left:50px;
        width:102px;
        height:102px;
        cursor:pointer;
        background-size:102px;
        background-image:url(../images/play_large.png);
    }
    .masthead #mainvideo_button:hover {
        background-image:url(../images/play_large_hover.png);
    }
    
    .rescape.masthead #vspan {
        position:absolute;
        top:40px;
        left:50px;
        width:102px;
        height:102px;
    }
    
    .masthead #kickstarter_button {
        position:absolute;
        font-family:SourceSansProRegular;
        font-size:16px;
        text-align:center;
        width:240px;
        bottom:10px;
        left:50%;
        margin-left:-130px;
        padding:20px 20px 20px 0px;
        background-color:#007242;
        border-radius:4px;
        color:white;
        cursor:pointer;
    }
    
    .masthead #kickstarter_button:hover {
        background-color:#004b2b;
    }
    
    .masthead #kickstarter_button #kickstarter_arrow {
        width:26px;
        height:26px;
        position:absolute;
        right:60px;
        top:18px;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:20px auto;
        background-image:url(../images/kickstarter_arrow.png);
    }


    
    .masthead .hand {
        position:absolute;
        right:0px;
        bottom:0px;
        width:145px;
        height:150px;
        background-size:145px auto;
        background-position-x:0%;
        background-image:url(../images/hand.png);
    }
    
    
    .section {
        padding:10px 0px 10px 0px;
        background-color:#fff;
    }
    
    .section.news_post {
        padding:10px 0px 10px 0px;
    }
    
    .section.down {
        background-color:#f8f8f8;
        background-image:url(../images/footer_shadow.png);
        background-repeat:repeat-x;
    }
    
    
    .section.bordered {
        border-top:2px #ddd dotted;
    }
    
    .section h1 {
        text-align:center;
        color:#0d66b2;
        font-family:SourceSansProLight;
        font-weight:normal;
        font-size:26px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    .section h2 {
        font-family:SourceSansProLight;
        font-size:16px;
        color:#191919;
        font-weight:normal;
        text-align:center;
        margin-top:5px;
        margin-bottom:30px;
    }
    
    a {
        color:#0d66b2;
        text-decoration:none;
        font-family:SourceSansProRegular;
    }
    
    a:hover {
        text-decoration:underline;
    }
    
    .section .row.body {
        padding-bottom:20px;
        border-bottom:2px #ddd dotted;
    }
    
    .section .post a {
        text-decoration:none;
        color:#0d66b2;
    }
    
    .section .post a:hover {
        text-decoration:underline;
    }
    
    .section .post .row {
        /*width:300px;*/
        font-family:SourceSansProRegular;
        font-size:13px;
        color:#191919;
    }
    
    .section .post .row li a {
        font-size:12px;
    }
    
    .section .post .date {
        position:absolute;
        top:0px;
        left:0x;
        width:54px;
        height:54px;
        
        background-color:#fb3900;
        color:#fff;
        background-image:url(../images/date_bg.png);
        text-align:center;
    }
    
    .section a.anchor {
        position:absolute;
        top:-159px;
    }
    
    .section .post .date .inner {
        margin-top:5px;
    }
    
    .section .post .date .inner .m {
        font-family:SourceSansProRegular;
        font-size:14px;
        margin-top:4px;
    }
    .section .post .date .inner .d {
        font-family:SourceSansProBlack;
        font-size:22px;
        margin-top:-6px;
    }
    
    
    .section .post .author {
        margin-left:75px;
        margin-top:-5px;
        color:#888888;
        font-size:12px;
    }
    
    .section h3 {
        text-align:left;
        color:#0d66b2;
        font-family:SourceSansProLight;
        font-weight:normal;
        font-size:28px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    .section h4 {
        text-align:left;
        font-size:20px;
        padding:0px;
        font-family:SourceSansProBold;
        color:#fb3900;
        
        font-weight:normal;
        font-size:20px;
        margin-top:20px;
        margin-bottom:5px;
    }
    
    
    
    .section .post h3 {
        font-size:20px;
        margin-left:75px;
    }
    .section .post h3 a {
        text-decoration:none;
        color:#0d66b2;
    }
    
    .section .post .row.body {
        margin-top:20px;
    }
    
    .section .aboutimage {
        border-radius:4px;
        margin-bottom:40px;
        width:300px;
    }
    
    .section .aboutimage.right {
        float:right;
        margin-left:70px;
    }
    .section .aboutimage.left {
        float:left;
        margin-right:70px;
    }
    
    
    
    .section .smallvideo {
        float:left;
        width:70px;
        height:56px;
        background-color:#555;
        background-position:50% 51%;
        margin:0px 0px 0px 5px;
        position:relative;
        border-radius:4px;
        background-size:150px auto;
    }
    
    .section .news_post .smallvideo {
        margin:0px 0px 10px 0px;
        width:300px;
        height:200px;
        background-size:500px auto;
    }
    
    .section .smallvideo:first-child {
        margin-left:0px;
    }
    
    .section .smallvideo .playbutton {
        position:absolute;
        top:50%;
        left:50%;
        width:38px;
        height:38px;
        background-size:38px auto;
        background-image:url(../images/play_small.png);
        margin-top:-19px;
        margin-left:-19px;
        cursor:pointer;
    }
    
    .section .news_post .smallvideo .playbutton {
        width:80px;
        height:80px;
        background-size:80px auto;
        margin-top:-40px;
        margin-left:-40px;
    }
    
    .section .smallvideo .playbutton:hover {
        background-image:url(../images/play_small_hover.png);
    }
    
    .section .smallvideo:first-child {
        margin-left:0px;
    }
    
    .header .links {
        position:absolute;
        top:50px;
        right:0px;
        left:0px;
        
        text-align:center;
    }
    
    .header .links a {
        margin-left:24px;
        font-family:SourceSansProBold;
        font-weight:normal;
        color:#03345a;
        font-size:15px;
        text-decoration:none;
    }
    .header .links a:first-child {
        margin-left:0px;
    }
    
    .header .links a span {
        color:#fb3900;
        font-family:SourceSansProLight;
    }
    
    .header .links a:hover {
        text-decoration:underline;
    }
    
    .section .section_content {
        position:relative;
    }
    
    .section .section_content h1 {
        font-size:18px;
        margin:10px 0px 0px 0px;
        padding:0px;
        font-family:SourceSansProBold;
        color:#fb3900;
        text-align:left;
    }
    
    
    .section .section_content p {
        font-size:15px;
        margin:5px 0px 5px 00px;
        padding:0px;
        font-family:SourceSansProRegular;
        color:#444444;
        text-align:left;
    }
    
    .section p {
        font-size:15px;
        padding:0px;
        font-family:SourceSansProRegular;
        color:#191919;
    }
    
    .section .techsection {
        position:relative;
        margin-bottom:4px;
        padding-bottom:20px;
    }
    
    .section .techsection :first-child {
        margin-left:0px;
    }
    
    
    .section .techsection .icon {
        width:50px;
        height:50px;
        
        float:left;
        background-size:150px auto;
        margin:5px 15px 0px 0px;
        background-image:url(../images/o_icons.png);
        background-position:0px 0px;
    }
    
    .section .techsection .icon#icon_imagerecognition {
        background-position:0px 0px;
    }
    
    .section .techsection .icon#icon_slam {
        background-position:-50px 0px;
        top:5px;
    }
    
    .section .techsection .icon#icon_coming {
        background-position:-100px 0px;
    }
    
    
    .section .app {
        margin-bottom:20px;
        position:relative;
    }
    
    .section .app .icon {
        width:57px;
        height:57px;
        position:absolute;
        background-size:114px auto;
        border-radius:6px;
        cursor:pointer;
        background-image:url(../images/appicons.png);
    }
    
    .section .app .title {
        
        margin-top:10px;
        margin-left:70px;
        bottom:0px;
        right:20px;
        color:#fb3900;
        font-family:SourceSansProBold;
        font-size:18px;
    }
    .section .app .subtext {
        margin-left:70px;
        bottom:0px;
        right:50px;
        font-size:14px;
        font-family:SourceSansProRegular;
        color:#444444;
    }
    
    .section .app .subtext p {
        text-align:left;
        font-size:14px;
        margin-left:0px;
        padding-left:0px;
    }
    
    .section .app .subtext a {
        color:#0d66b3;
        text-decoration:none;
    }
    .section .app .subtext a:hover {
        text-decoration:underline;
    }
    
    .section .app .subtext .dev {
        font-family:SourceSansProBold;
    }
    
    .section .app .icon#icon_app_sdk {
        background-position:0px 0px;
    }
    .section .app .icon#icon_app_browser {
        background-position:-57px 0px;
    }
    .section .app .icon#icon_app_mcr {
        background-position:0px -57px;
    }
    .section .app .icon#icon_app_ballinvasion {
        background-position:-57px -57px;
    }
    
    
    .footer {
        background-color:#ebebef;
        padding-top:50px;
        padding-bottom:80px;
        background-image:url(../images/footer_shadow.png);
        background-repeat:repeat-x;
    }
    
    .footer .links {
        text-align:center;
        color:#888;
    }
    
    .footer .links a {
        font-family:SourceSansProRegular;
        font-size:12px;
        margin-left:10px;
        margin-right:10px;
        color:#0d66b2;
        text-decoration:none;
    }
    .footer .links a:hover {
        text-decoration:underline;
    }
    
    .footer p {
        margin-top:30px;
        font-size:12px;
        font-family:SourceSansProRegular;
        color:#191919;
        text-align:center;
    }
    
    .col4 {
        margin-bottom:10px;
    }
    
    .col4 p {
        color:#191919;
        font-family:SourceSansProRegular;
        font-size:13px;
        margin-bottom:2px;
        margin-top:2px;
    }
    
    .col4 p.author {
        font-family:SourceSansProBold;
        font-size:14px;
        color:#fb3900;
        text-align:right;
        margin-bottom:20px;
    }
    
    .col4 .fp_q {
        float:left;
        font-family:Georgia, Times New Roman, serif;
        font-size:64px;
        height:32px;
        margin-right:10px;
        margin-top:-5px;
        color:#ccc;
    }
    
    .logos {
        margin-bottom:50px;
        margin-top:80px;
        
    }
    
    .logos a {
        display:block;
        width:25%;
        height:25px;
        float:left;
        background-size:auto 25px;
        background-position:50% 50%;
        background-repeat:no-repeat;
        cursor:pointer;
    }
    
    
    #videocover {
        display:none;
        z-index:12;
        position:fixed;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        background-image:url(../images/videocover.png);
        background-repeat:repeat;
    }
    
    #videocover iframe {
        position:absolute;
        top:0px;
        left:0px;
    }
    
    #videocover .closevideo {
        position:absolute;
        right:-16px;
        top:-16px;
        width:33px;
        height:33px;
        background-size:33px auto;
        cursor:pointer;
        background-image:url(../images/closevideo.png);
    }
    #videocover .closevideo:hover {
        background-image:url(../images/closevideo_hover.png);
    }
    
    
}




/* Mobile phone screens */
@media all and (min-width:1567px) {
    
    .masthead {
        background-position:50% 100%;
        background-size:cover;
    }
}