.header{height: 70px}
.hamburger-menu{float: left }
.logo{ float: left}
.navigation{ float: right}
.navigation ul li{ float: left}

.navbar{margin-bottom: 0px}
.car-dashboard-image{max-width: 100%; max-height: 100%}

.mast-head{position: relative}


.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.tagline{position: absolute; left: 43%; top: 1%}
.tagline h1 {font-size: 5em; font-family: 'GothamNarrowBold'; font-size: 92px; font-size: 5vw; margin-left: -3px; margin-bottom: 0px; padding-left: 0}
.tagline h1, .tagline h5{color: #ffffff;}
.tagline h5{ font-family: 'GothamNarrowBook'; font-size: 16px; font-size:calc(12px + 0.7vw); margin-top: 10px; padding-top:0px }
.tag{margin:0;}
.tag > h1{font-family: 'GothamNarrowBook'; color:#9a9a9a; font-size: calc(12px + 0.1vw); margin-left: 0px; padding-left: 0px}
.backstyle{background-color: #000000; opacity: 0.9; padding:0 15px; left: 20%; top: 35%;}

.call-to-action{position: absolute;; left: 43%; top: 30%}
.call-to-action ul{padding: 0; margin: 0;}
.call-to-action ul li{background-color:#00abec ; display:block; float: left; border: 1px solid #0088b2; border-radius: 20px; padding:10px 10px; margin-right: 5px}
.call-to-action ul li a{font-family: 'GothamNarrowBook';font-size:calc(12px + 0.1vw); color: #ffffff; text-decoration: none;}
.call-to-action ul li:hover{background-color:#0090bc}



.nav { font-family: 'GothamNarrowMedium'; font-size: 16px}

.step-one h3, .row h3{color: #505050; font-family: 'GothamNarrowBook'; font-size: 38px}
.step-one p {color: #686868}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.navbar-default{background-color: #fff; border-color: transparent; opacity: 0.9}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
 background-color: transparent; border-bottom: 3px solid #0097e8 }
.navbar-custom {background-color: transparent;}

.navbar-custom > ul > li > a {
    background-color: transparent;
    padding-bottom: 5px
}

.navbar-header{margin:5px 0 0 15px}
.navbar-header > h1{font-family: 'GothamNarrowBook'; color:#c0c0c0; font-size: calc(12px + 0.1vw)}

.navbar-custom > li{padding-right: 22px; padding-left: 22px; padding-top: 10px}
.active{border-bottom:none/* 4px solid #0097e8;*/}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: transparent;
}



.step-one{ padding: 50px}
.step h1{color: #00abec; font-family:'GothamNarrowUltra'; font-size: 36px }
.step h2{color: #4d4d4d; font-family: 'GothamNarrowMedium'; border-bottom: 1px solid #b3b3b3; padding-bottom: 10px}
.step p{color: #999999; font-family: 'GothamNarrowBook'; font-size: 14px; line-height: 22px}


.how-it-works{position: relative; max-width: 1000px; margin: 50px auto 70px auto;}
.row > .text-center > p {font-family: 'GothamNarrowBook';}

.hevo-tagline > h1 {font-family: 'GothamNarrowBook'; font-size: calc(12px + 0.2vw); padding:0; margin: 0}

.how-it-works > .one {position: absolute; left: 17%; top: 87%; width: 30%}
.how-it-works > .one > h2, .how-it-works > .two > h2, .how-it-works > .three > h2{font-family: 'GothamNarrowBold'; font-size:calc(12px + 0.7vw); margin: 0; padding: 0}
.how-it-works > .one > p, .how-it-works > .two > p, .how-it-works > .three > p{font-family: 'GothamNarrowBook'; font-size:calc(11px + 0.1vw);}


.how-it-works > .two {position: absolute; left: 53%; top: 87%; width: 30%}

.how-it-works > .three {position: absolute; left: 18%; top: 4%; width: 40%}



.step-two{padding: 50px}
.step-three{padding: 50px}
.step-four{padding: 50px}
.step-five{padding: 50px}


.arrow-down{position: absolute; left: 50%; top: 92%}


.services{}
.at-home{}
.on-the-go{}
.always-around-you{}

.dashboard{background-color: #e6e6e6; font-family:'GothamNarrowMedium'}
.dashboard h2, .dashboard p{color: #3d3d3d; font-family: 'GothamNarrowBook'}

.stay-in-the-know{background-color: #6aabce; padding: 50px; color: #ffffff}
.stay-in-the-know input {width: 100%; margin-bottom: 12px; height: 40px; border: 1px solid #58a1c8; color: #505050; padding-left:10px}
.stay-in-the-know textarea {width: 100%; height: 200px;border: 1px solid #58a1c8; color: #505050; padding-left:10px}
.stay-in-the-know button{background-color: #0071bc; color: #ffffff; border: none; width: 100%; height: 40px}
.stay-in-the-know h1{font-size: 33px; font-weight: bold}

.footer{background-color: #333333; color: #f1f1f1; padding: 50px 50px 0 50px; font-family: 'GothamNarrowBook'}
.footer > .col-md-3 > a, .footer > .col-md-3 > a:visited {color: #f1f1f1}

#contact-us-status{background: rgb(128, 156, 77); border: 1px solid rgb(69, 131, 59); text-align: center; width: width: 100%; height: 40px; display: none; vertical-align: middle; margin-bottom: 10px}

.social-media > .facebook, .social-media > .twitter, .social-media > .instagram, .social-media > .linkedin{
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 3px 
}

.drop-pin{padding: 0; background-image: url('../images/location-circle.svg'); background-repeat: no-repeat; background-position: 50% 25%; background-size:160px 160px }
.drop-pin > img{margin-top: 50px; margin-bottom: 40px}
.drop-pin > p{text-align: left; font-size: 14px; color: rgb(77,77,77); padding:0 15px }



.members{display:inline-block;}
.team > .members > .team-member > h1{font-family: 'GothamNarrowBook'; font-size: calc(12px + 0.8vw); margin: 5px 0 0 0; padding: 0}
.team > .members > .team-member > h2{font-family: 'GothamNarrowBook'; font-size: calc(10px + 0.6vw); margin: 0 0 20px 0; padding: 0; color: #565656}

.page-header{color: #00abec; text-align: center; font-family: 'GothamNarrowBold'}
.page-header-sub{ font-family: 'GothamNarrowBook'}

.form{font-family: 'GothamNarrowBook'; margin-bottom:50px; padding: 30px; border: 1px solid #eeeeee}
.form p{margin: 0; padding: 0}
.form > form > section{ display: block;}
.form input{ border-top: none; margin-bottom: 40px; border-right: none; border-bottom: 1px solid #c0c0c0; border-left: none; width: 98%; }
.form select{border-top: none; border-right: none; border-bottom: 1px solid #c0c0c0; border-left: none; width: 98%; background-color: transparent; margin-bottom: 40px}
.form textarea{border: 1px solid #c0c0c0; height: 80px; width: 100%; margin-bottom: 40px }

/*.form button{color: #00abec; font-family: 'GothamNarrowMedium'; border:2px solid #00abec;; background-color: #ffffff; ;border-radius: 15px; width: 100px;}*/
/*
input.parsley-error, select.parsley-error, textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.bs-callout-warning {
    background-color: #fcf8f2;
    border-color: #f0ad4e;
}

.bs-callout {
    margin: 20px 0;
    padding: 20px;
    border-left: 3px solid #eee;
}

.parsley-errors-list.filled {
    opacity: 1;
}
.parsley-errors-list {
    margin: 2px 0 3px;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    }*/

.bs-callout-warning {
    background-color: #fcf8f2;
    border-color: #f0ad4e;
}

.bs-callout {
    margin: 20px 0;
    padding: 20px;
    border-left: 3px solid #eee;
}    
ul.parsley-errors-list{margin: 0 ; padding: 0; display: none;}
.parsley-errors-list{margin:0px; line-height: 0; }

.form-radio-buttons{list-style-type:none; margin:0; padding:0; display:inline-block;}
.form-radio-buttons li {float:left;margin:0 10px 10px 0; width:100px; height:35px; position:relative;}
.form-radio-buttons label{display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align: center;}
.form-radio-buttons input[type="radio"] {opacity:0.011; z-index:100;}
.form-radio-buttons input[type="radio"]:checked + label {background:#00abec; color: #ffffff}
.form-radio-buttons label {padding:5px; border:1px solid #CCC;  cursor:pointer; z-index:90; border-radius: 15px}
.form-radio-buttons label:hover {background:#DDD;}

.form-radio-buttons input[type="checkbox"] {opacity:0.011; z-index:100;}
.form-radio-buttons input[type="checkbox"]:checked + label {background:#00abec; color: #ffffff}


.join-us > h2{font-family: 'GothamNarrowBook'; font-size: calc(28px + 0.1vw); color: rgb(77,77,77);}
.join-us > p{font-family: 'GothamNarrowBook'; font-size: 12px; color: rgb(128,128,128);}
.join-us > label > input{visibility: hidden; position: absolute;}
.join-us > label > input + img {cursor: pointer; z-index: -999; opacity: 0.5}
.join-us > label > img:last-child{display: none}
.join-us > label > input:checked + img {background:url('../images/checked-position.png'); background-size: 145px 145px; z-index: 9999;display: block;; opacity: 1}


.join-work > h2{border-bottom: 3px solid rgba(193,39,45,0.4)}
.join-invest > h2{border-bottom: 3px solid rgba(140,198,63,0.4)}
.join-distribute > h2{border-bottom: 3px solid rgba(41,171,226,0.4)}
.join-contribute > h2{border-bottom: 3px solid rgba(46,49,146,0.4)}
.join-other > h2{border-bottom: 3px solid rgb(153,153,153)}
#upload-button{border:none;; width: 140px; height: 140px; margin: 0; padding: 0}
.button-join-us, .button-big, #button-request-wireless-charging{color: #ffffff; font-family: 'GothamNarrowBook'; font-size: 28px; border:none; background-color: #00abec; ;border-radius: 25px; width: 150px; height: 50px; margin-bottom: 50px}

#map-canvas{height: 310px; width: 100%; display: block;  position: relative;}
#location-pin{ position: relative; z-index: 999}
#location-map{position: relative;}
.controls {
        
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 31px;
        outline: none;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 300px;
        position: absolute;
        left: 100px;
        top: 10px;
        z-index:9999;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
      #target {
        width: 345px;
      }


.form-upload > h3{font-family: 'GothamNarrowBold'; color: #00abec; font-size: 22px}
.form-upload > p{font-size: 14px; color: gray; margin-bottom: 30px}
.form-upload > p:last-child{margin-top:15px; font-size: 12px }
.file-upload > input{display: none}
.file-upload > label:hover{cursor: pointer;}

.slideout-menu {position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; width: 256px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none;}
.slideout-panel {position: relative; z-index: 1;}
.slideout-open, .slideout-open body, .slideout-open .slideout-panel { overflow: hidden;}

.slideout-open .slideout-menu {display: block;}
.press{font-family: 'GothamNarrowBook'; text-align: center;}


.newsroom-press-post{border:1px solid #f1f1f1; display: block; float: left; margin-right: 35px ;margin-bottom: 35px; height: 400px}
.press-visual{height: 200px; text-align: center; background-color: rgb(248,248,248); white-space: nowrap;  }
.press-visual > img{vertical-align: middle; max-height: 200px; max-width: 200px; border:none; }
.press-visual-helper{display: inline-block;
    height: 100%;
    vertical-align: middle;}
.press-details{background-color: #ffffff ;padding:0 10px 0 10px}
.row .press-details > h3{font-family: 'GothamNarrowBold'; font-size: calc(14px + 0.3vw); margin:10px 0 0 0; padding: 0; color: #000000}
.press-details > p{font-family: 'GothamNarrowBook'; font-size: calc(12px + 0.1vw); margin: 10px 0 10px 0; padding: 0; color: rgb(128,128,128);}
.row .press-meta{background-color:#ffffff }
.row .press-meta > ul{margin:0; padding: 0; border-top:1px solid #c0c0c0; list-style-type: none; list-style: none; display: block;  }
.row .press-meta ul > li:first-child{background-color: #6aabce; height: inherit; padding:3px 10px; color: #ffffff; font-family: 'GothamNarrowBold'; font-size: calc(11px + 0.1vw); vertical-align: middle; display: table-cell;}
.row .press-meta ul > li {float: left;height: inherit; margin-right: 10px; padding-top: 2px; font-family: 'GothamNarrowBook'; color: rgb(128,128,128);}

#menu{
    padding-top: 80px;
}
#menu > .menu-section{
    margin-bottom: 15px;
    padding-left: 15px
}

#menu > .menu-section > a{
    font-family: 'GothamNarrowBook';color: #565656
}
.toggle-button{float:left; margin: 19px 50px 0 10px}
.fixed {
  backface-visibility: hidden;
  position: fixed;
  z-index:2;
  transition: transform 300ms ease;
}

.fixed-open {
  transform: translate3d(256px, 0px, 0px);
}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    text-align: center;
}
.modal-content > section{margin-bottom: 30px}
.modal-content > section > h2{color: #c0c0c0; font-family: 'GothamNarrowBook'; font-size: 14px;}
.modal-content > section >h1{color: #00abec; font-family: 'GothamNarrowBold'; font-size: 32px;}
.modal-content > section >p{color: #565656; font-family: 'GothamNarrowBook'; font-size: 16px;}


.required{color: #ff0000; float: left !important; display: inline-block;}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@font-face{font-family:'GothamNarrowUltra';
           src:url('fonts/gothamnarrow-ultra-webfont.eot');
           src:url('fonts/gothamnarrow-ultra-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-ultra-webfont.woff') format('woff'),url('fonts/gothamnarrow-ultra-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-ultra-webfont.svg#GothamNarrowUltra') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowBlack';
           src:url('fonts/gothamnarrow-black-webfont.eot');
           src:url('fonts/gothamnarrow-black-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-black-webfont.woff') format('woff'),url('fonts/gothamnarrow-black-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-black-webfont.svg#GothamNarrowBlack') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowBold';
           src:url('fonts/gothamnarrow-bold-webfont.eot');
           src:url('fonts/gothamnarrow-bold-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-bold-webfont.woff') format('woff'),url('fonts/gothamnarrow-bold-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-bold-webfont.svg#GothamNarrowBold') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowMedium';src:url('fonts/gothamnarrow-medium-webfont.eot');
           src:url('fonts/gothamnarrow-medium-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-medium-webfont.woff') format('woff'),url('fonts/gothamnarrow-medium-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-medium-webfont.svg#GothamNarrowMedium') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowBook';src:url('fonts/gothamnarrow-book-webfont.eot');
           src:url('fonts/gothamnarrow-book-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-book-webfont.woff') format('woff'),url('fonts/gothamnarrow-book-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-book-webfont.svg#GothamNarrowBook') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowLight';src:url('fonts/gothamnarrow-light-webfont.eot');
           src:url('fonts/gothamnarrow-light-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-light-webfont.woff') format('woff'),url('fonts/gothamnarrow-light-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-light-webfont.svg#GothamNarrowLight') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowExtraLight';src:url('fonts/gothamnarrow-xlight-webfont.eot');
           src:url('fonts/gothamnarrow-xlight-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-xlight-webfont.woff') format('woff'),url('fonts/gothamnarrow-xlight-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-xlight-webfont.svg#GothamNarrowExtraLight') format('svg');
           font-weight:normal;
           font-style:normal}

@font-face{font-family:'GothamNarrowThin';src:url('fonts/gothamnarrow-thin-webfont.eot');
           src:url('fonts/gothamnarrow-thin-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/gothamnarrow-thin-webfont.woff') format('woff'),url('fonts/gothamnarrow-thin-webfont.ttf') format('truetype'),url('fonts/gothamnarrow-thin-webfont.svg#GothamNarrowThin') format('svg');
           font-weight:normal;
           font-style:normal}