body{
    font-family: ff-clan-web-pro, sans-serif;
    /*font-weight: 300;*/
    /*padding-top:40px;*/
}

.transitions{
    color:#4DB5D9;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.transitions:hover{
    color: #0F4E65
}

.headshot{
    max-height:400px;
    /*padding-top:30px;*/
}

.wrapper {
    background-color:white;
}

.navbar-inverse {
    /*background: rgba(0,0,0,0.4);*/
    /*background: rgba(2,43,58,1);*/
    background: black;
}

.navbar-brand {
    color:white;
    font-weight:500;
}

.navbar-inverse .navbar-brand{
    color:white;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover{
    background: #4DB5D9;
}

.splash {
    width:100%;
    padding:0;
    margin:0;
}

#banner-head{
    position:fixed;
    margin-top:50px;
    z-index:1;
    background-color:white;
    width:100%;
    /*height:190px;*/
    font-family: ff-clan-web-pro, sans-serif;
    /*font-weight: 300;*/
    opacity:0.95;
}
#mapbanner{
    height:70vh;
    width:100%;
    background-size: cover;
    /*background-color: #fff;*/
    z-index:-2;
}
#map-one{
    position:fixed;
    height:70vh;
    width:100%;
    z-index:-1;
}

.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th {
    border: none;
}

#banner{
    height:40vh;
    min-height:300px;
    width:100%;
    background:url("../img/dc.jpg") no-repeat top;
    background-size: cover;
    background-color: #222;
}
#banner>.container>div {
    padding-top:70px;
}
#banner>.container>div>h2>i,
#banner>.container>div>h2>p{
    opacity:0.8;
    color: white;
    font-family: ff-clan-web-pro, sans-serif;
    font-weight: 300;
}
#banner3{
    /*height:40vh;*/
    min-height:300px;
    width:100%;
    /*background:url("../img/dc.jpg") no-repeat top;*/
    background-size: cover;
    background-color: #222;
    background-color: black;
}
#banner3>.container>div {
    padding-top:40px;
    padding-bottom:40px;
}
#banner3>.container>div>h2,
#banner3>.container>div>h2>p{
    opacity:0.8;
    color: white;
    font-family: ff-clan-web-pro, sans-serif;
    font-weight: 300;
}
#banner3>.container>div>div{
    padding-top:10px;
    color: #4DB5D9;
    /*font-size:1.2em;*/
}
#banner3>.container>div>div>table{
    table-layout:fixed;
}
#banner3>.container>div>div>table>tbody>tr>td>span{
    color:white;
}

#banner2{
    height:40vh;
    min-height:300px;
    width:100%;
    background:url("https://d1a3f4spazzrp4.cloudfront.net/developer.uber.com/images/grid_banner.0b4ed80d01c3bd85a213b09b74cf9d52.png") no-repeat center;
    background-size: cover;
    background-color: #222;
}
#banner2>.container>div {
    padding-top:100px;
}
#banner2>.container>div>h2>i,
#banner2>.container>div>h2>p{
    opacity:0.8;
    color: white;
    font-family: ff-clan-web-pro, sans-serif;
    font-weight: 300;
}

.uberbtn{
    background-color:rgba(0,0,0,0);
    outline:#4DB5D9 solid;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.uberbtn:hover,
.uberbtn:active{
    background-color:#4DB5D9;
    border-radius:0;
}

.uber-overlay>div{
    padding-top:100px;
    padding-left:90px;
}
.uber-overlay>div>h3{
    color:white;
    opacity:.7;
    text-align:left;
}

#mainlinks a{
    text-decoration: none;
    color: #333333;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
#mainlinks a:hover,
#mainlinks a:active{
    color:#4DB5D9;

}

#mainlinks2 div{
    padding-bottom:50px;

}

.btn-Tools{
    opacity: 0;
    padding:40px 0;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.dataset {
    background-size: 100% auto;
    background-color:white;
    background-position:center;
    border: 5px solid #4DB5D9;
    height:200px;
    padding:0;
    margin-bottom:30px;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.dataset>.mask>h3{
    margin-top:0px;
    padding-top:30px;
    font-size:4em;
    font-family:ff-clan-web-pro, sans-serif;
    color:black;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.mask{
    height:100%;
    width:100%;
    background-color:#4DB5D9;
    opacity:0;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.dataset:hover,
.dataset:active{
    background-size: 110% auto;

}

.dataset:hover>.mask,
.dataset:focus>.mask,
.dataset:target>.mask,
.dataset:active>.mask{
    color:white;
    opacity:.9;
}


.dataset:hover>.mask>h3,
.dataset:active>.mask>h3{
    color:white
}

.dataset:hover .btn-Tools,
.dataset:active .btn-Tools{
    opacity: 100;
    visibility: visible;
    transform: translateY(-30px);
}

.spacer{
    height:150px;
}

/*search box*/
.expanding-sf {
    height:20px;
    margin-top:5px;
    margin-left:20px;
}
.form {
    margin: 0;
    position: relative;
    /*top: 0;*/
    width: 100%;
}
/** Essentials **/
.toggle {
    /*background: url("http://i.imgur.com/ePNPopY.png") no-repeat scroll center center #022B3A;*/
    background: url("http://i.imgur.com/ePNPopY.png") no-repeat scroll center center black;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    height: 40px;
    position: absolute;
    right: 0;
    width: 50px;
}
#searchform {
    float: right;
    height: 40px;
    margin: 0;
    opacity: 0;
    padding: 0;
    visibility: hidden;
    width: 10px;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.form:hover #searchform {
    display: block;
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    visibility: visible;
    width: 250px;
}

::-webkit-input-placeholder {
    color: white;
}
:-moz-placeholder {
    color: white;
}
::-moz-placeholder {
    color: white;
}
:-ms-input-placeholder {
    color: white;
}


#searchform #s {
    background: none repeat scroll 0 0 #4DB5D9;
    border: medium none;
    color: #FFFFFF;
    float: right;
    outline: none;
    /*font-family: helvetica, verdana, arial, sans-serif;*/
    /*font-size: 12px;*/
    height: 100%;
    padding: 0 15px;
    width: 100%;
}
#searchform #searchsubmit {
    background: url("http://i.imgur.com/ePNPopY.png") no-repeat scroll center center #4DB5D9;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    height: 40px;
    position: absolute;
    right: 0;
    width: 50px;
}

/* Footer */
#footerwrap {
    /*margin-top:-5px;*/
    padding-top: 60px;
    padding-bottom: 60px;
    background: black;
}

#footerwrap p {
    color: #bfc9d3;
}

#footerwrap h4 {
    color: white;
}

#footerwrap i {
    font-size: 30px;
    color: #bfc9d3;
    padding:20px 10px;
}

#footerwrap i:hover {
    color: #4DB5D9;
    padding:20px 10px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.illustration-primary-fill {
    fill: #A3E9EC !important
}

.illustration-secondary-fill {
    fill: #1E96BE !important
}

.illustration-tertiary-fill {
    fill: #0F4E65
}

.illustration-primary-stroke {
    stroke: #A3E9EC !important;
    fill: none
}

.illustration-secondary-stroke {
    stroke: #1E96BE !important;
    fill: none
}

.illustration-tertiary-stroke {
    stroke: #0F4E65 !important;
    fill: none
}

.pattern-stroke {
    stroke: #4DB5D9 !important;
    stroke-width: 1.25;
    fill: none
}

.hline-w {
    border-bottom: 2px solid #ffffff;
    margin-bottom: 25px;
}

.btn:focus,.btn:active {
    outline-color: #4DB5D9 !important;
}

/*Docs Style*/
#leftCol{
    /*position:fixed;*/
}

.table-head{
    color: #4DB5D9;
    cursor:pointer;
}

#toTop {
    position:fixed;
    top:60px;
    right:10px;
    z-index:1;
    opacity:.3;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

#toTop:hover,
#toTop:focus{
    opacity:1;

}

/* apple fixes */
.appleBtn {
    background: lightgrey;
}
.squared {
    border-radius:0px;
}



@media only screen and (max-width : 1200px) {
    .uber-overlay>div{
        padding-top:20px;
        padding-left:20px;
    }
    .uber-overlay>div>h3{
        /*font-size:1em;*/
        /*text-align: center;*/
    }
    #banner>.container>div{
        padding-top:20px;
    }
    #banner>.container>div>h2>i,
    #banner>.container>div>h2>p{
        font-size:.8em;
    }

}

@media only screen and (max-width : 992px) {
    .uber-overlay>div{
        /*padding-top:0;*/
        /*padding-left:20px;*/
    }
    .uber-overlay>div>h3{
        font-size:1.5em;
        /*text-align: center;*/
    }

}

@media screen and (max-width : 767px) {
    .expanding-sf {
        height: 60px;
        width:100%;
        background: none repeat scroll 0 0 #4DB5D9;
    }

    .form,
    #searchform,
    #searchform #s,
    .expanding-sf,
    .form:hover #searchform {
        margin-left:0;
        display: block;
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        visibility: visible;
        width: 100%;
    }
    #leftCol{
        position:relative;
    }
    .uber-overlay>div>h3{
        font-size:1.0em;
        /*text-align: center;*/
    }
}

@media screen and (max-width: 580px) {
    #banner>.container>div,
    #banner2>.container>div {
        padding-top:0px;
    }
    #banner>.container>div>h2>i,
    #banner>.container>div>h2>p,
    #banner2>.container>div>h2>i,
    #banner2>.container>div>h2>p{
        opacity:0.8;
        font-size:.5em;
    }
    #banner-head h1{
        font-size:1.5em;
    }
    #banner-head h4,
    #banner-head .btn{
        font-size:.9em;
    }
}