/*RESET*/
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	outline: inherit;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

:hover {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
::-webkit-scrollbar {
    width: 5px;
} 
::-webkit-scrollbar-track {
    background: #ECFCFF;
} 
::-webkit-scrollbar-thumb {
	background: #26CCF0;
    border-radius: 5px;
}

body {
    font-family: 'poppins', sans-serif;
    font-weight: 300;
    color: #002139;
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
}


/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
strong {
    font-weight: 600;
}

p,
li {
    font-size: 18px;
    line-height: 150%;
    margin: 20px auto 0;
}

ul li {
    margin: 5px 0;
    margin-left: 25px;
}
ul.ca-lt-mj {
    list-style: none;
}
ul.ca-lt-mj li {
    display: inline-block;
    margin: 0;
}
ol.rental li {
    margin-left: 5%;
}

.highlight {
    background: yellow;
}


/*OBJECTS*/
img {
    max-width: 100%;
}

.video {
    position: relative; 
    padding-bottom: 40%;
    height: 0;
    overflow: hidden; 
    max-width: 100%;
}
.video iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    border-radius: 20px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    border-radius: 25px;
    border: none;
    font-size: 16px;
    font-weight: 700;
}
.btn:hover {
    cursor: pointer;
}
.btn-primary {
    background: #26CCF0;
    color: #002139;
    border: 2px solid white;
}
.btn-secondary {
    background: transparent;
    color: #002139;
    border: 2px solid #002139;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background: #002139;
    color: white;
    border: 2px solid #002139;
}

.link,
.back-link {
    font-weight: 600;
}
.back-link {
    text-align: right;
    margin-top: 10px;
}
.link img,
.back-link img {
    width: 30px;
    height: 30px;
    -webkit-transform: translateY(9px);
            transform: translateY(9px);
}
.link:hover img,
.link:focus img {
    margin-left: 5px;
}
.back-link:hover img,
.back-link:focus img {
    margin-right: 5px;
}
.underline {
    text-decoration: underline;
}
.underline a:hover,
.underline a:focus {
    text-decoration: none;
    background: #26CCF0;
    display: inline-block;
}

hr {
    border: none;
    margin: 50px auto;
    width: 100%;
    height: 1px;
    background: #ddd;
}


/*LINKS*/
a:link,
a:hover,
a:visited,
a:active {
    color: inherit;
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}


/*DIVS*/
header {
    width: 100%;
    background: white;
    padding: 20px 0;
    position: fixed;
    top: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,.05);
    z-index: 100;
}
header .logo {
    width: 75%;
    max-width: 250px;
}
header .logo img {
    width: 100%;
}
header nav ul {
    list-style: none;
}
header nav ul li {
    display: inline-block;
    padding: 0;
    margin: 0 20px;
    font-weight: 500;
}
header nav ul li a:hover,
header nav ul li a:focus {
    color: #26CCF0;
}
header nav ul li .dropdown-menu {
    display: none;
    position: fixed;
    background: #f7f7f7;
    width: 100%;
    top: 100px;
    left: 0;
    text-align: center;
    padding: 20px 0;
}
/*header nav #click .dropdown-toggle:focus + ul.dropdown-menu {
    display: block;
}*/
header .buttons .btn-primary {
    margin-right: 20px;
}
header .mobile-nav {
    display: none;
    width: 40px;
    header: 40px;
}
header .mobile-nav img {
    width: 100%;
}

section {
    width: 100%;
    position: relative;
}
section .btn {
    margin-top: 20px;
}

.clouds-left {
    background: url(../images/backgrounds/hero-clouds-left.jpg) no-repeat center left #26CCF0;
    background-size: contain;
}
.clouds-right {
    background: url(../images/backgrounds/hero-clouds-right.jpg) no-repeat center right #26CCF0;
    background-size: contain;
}
.city {
    background: url(../images/backgrounds/city.jpg) no-repeat center #26CCF0;
    background-size: cover;
}
.media {
    background: url(../images/backgrounds/press-media.jpg) no-repeat center #26CCF0;
    background-size: cover;
}
.safety {
    background: url(../images/backgrounds/safety-first.jpg) no-repeat center #26CCF0;
    background-size: cover;
}
.hero {
    padding: 13% 0;
    color: white;
    z-index: 50;
}
.clouds-left .content {
    padding-left: calc(50% - 40px);
}
.clouds-right .content {
    padding-right: calc(50% - 40px);
}
.home-hero-img {
    width: 45%;
    position: absolute;
    top: 150px;
    left: 5%;
}
.ride-hero-img {
    width: 45%;
    position: absolute;
    top: 150px;
    right: 5%;
}

.content {
    width: 95%;
    margin: 0 auto;
    position: relative;
}

#woman-scooter-phone {
    background: url(../images/backgrounds/woman-scooter-phone.jpg) no-repeat center right #26CCF0;
    background-size: contain;
}
#woman-helmet {
    background: url(../images/backgrounds/woman-helmet.jpg) no-repeat center right #26CCF0;
    background-size: contain;
}
#girl-scooter-lake {
    background: url(../images/backgrounds/girl-scooter-lake.jpg) no-repeat center left #26CCF0;
    background-size: contain;
}
#man-scooter-phone {
    background: url(../images/backgrounds/man-scooter-phone.jpg) no-repeat center right #26CCF0;
    background-size: contain;
}
#lake-mountain {
    background: url(../images/thumbs/lake-mountain.jpg) no-repeat center;
    background-size: cover;
    border-radius: 20px;
    padding: 20% 0;
    min-height: 400px;
    object-fit: cover;
    object-position: top center;
}
#man-ebike {
    background: url(../images/thumbs/man-ebike.jpg) no-repeat center;
    background-size: cover;
    border-radius: 20px;
    padding: 20% 0;
    min-height: 600px;
    object-fit: cover;
    object-position: top center;
}
#girl-helmet {
    background: url(../images/thumbs/girl-helmet.jpg) no-repeat center;
    background-size: cover;
    border-radius: 20px;
    padding: 30% 0;
    min-height: 300px;
    object-fit: cover;
    object-position: top center;
}
#campus-scooters {
    background: url(../images/thumbs/students-bird-scooters.jpg) no-repeat top center;
    background-size: cover;
    border-radius: 20px;
    padding: 30% 0;
    min-height: 300px;
    object-fit: cover;
    object-position: top center;
}
#parked-bikes {
    background: url(../images/thumbs/parked-bird-bikes.jpg) no-repeat top center;
    background-size: cover;
    border-radius: 20px;
    padding: 30% 0;
    min-height: 300px;
    object-fit: cover;
    object-position: top center;
}
#featured-blog,
#featured-blog-post {
    margin-top: 100px;
}


.col12 {
    width: 50%;
}
.col12n {
    width: calc(50% - 100px);
}
.col13 {
    width: 33.33%;
}
.col13n {
    width: calc(33.33% - 50px);
}
.col14 {
    width: 25%;
}
.col14n {
    width: calc(25% - 10px);
}
.col15 {
    width: 20%;
}
.col15n {
    width: calc(20% - 20px);
}
.col23 {
    width: 66.66%;
}
.col23n {
    width: calc(66.66% - 10px);
}
.col34 {
    width: 75%;
}
.col34n {
    width: calc(75% - 10px);
}

.tile-icon-text-1-2,
.tile-icon-text-1-3 {
    padding: 20px;
    border-radius: 20px;
    margin: 20px 0;
}
.tile-icon-text-1-2 {
    width: calc(50% - 50px);
}
.tile-icon-text-1-3 {
    width: calc(33.33% - 50px);
}
.tile-icon-text-1-2 img,
.tile-icon-text-1-3 img {
    width: 150px;
}

.city-tile {
    width: calc(33.33% - 25px);
    margin-top: 50px;
    position: relative;
}
.city-tile:before {
    content: '+';
    font-family: 'poppins', sans-serif;
    font-weight: 400;
    font-size: 96px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    z-index: -10;
}
.city-tile img {
    border-radius: 20px;
}
.city-tile:hover img,
.city-tile:focus img {
    opacity: .6;
}
.city-tile:hover p,
.city-tile:focus {
    color: #26CCF0;
}

.equation {
    width: 15%;
}
.equation p {
    margin: 0;
}

.safety-icon {
    width: 50px;
}
.safety-content {
    width: calc(100% - 60px);
}
.safety-content p {
    margin-top: 10px;
}

.carousel-img {
    width: 450px;
}
.carousel-text {
    width: calc(100% - 550px);
}

#download {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(38,204,240,1) 10%, rgba(38,204,240,1) 90%, rgba(255,255,255,1) 90%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(38,204,240,1) 10%, rgba(38,204,240,1) 90%, rgba(255,255,255,1) 90%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(38,204,240,1) 10%, rgba(38,204,240,1) 90%, rgba(255,255,255,1) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
    color: white;
}
.download-text {
    width: calc(100% - 400px);
}
.phone-img {
    width: 300px;
}

footer {
    background: #f7f7f7;
}
footer .top {
    background: white;
    padding: 20px 0;
}
footer .footer-logo {
    width: 200px;
}
footer .footer-logo img {
    width: 100%;
}
footer .top .app-buttons img {
    margin-left: 10px;
    width: 125px;
}
footer .top .app-buttons img:hover,
footer .top .app-buttons img:focus {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
}
footer ul {
    list-style: none;
}
footer ul li {
    padding: 0;
    margin: 10px 0;
    font-size: 16px;
}
footer ul li a:hover,
footer ul li a:focus {
    text-decoration: underline;
}
footer p {
    font-weight: 600;
}
footer ul.sm-icons li {
    display: inline-block;
    margin-right: 10px;
}
footer ul.sm-icons img {
    width: 24px;
    header: 24px;
}
footer ul.footer-details li {
    display: inline-block;
    margin-right: 10px;
}


/*MODAL*/
.modal,
.modal-map {
    display: none;
    position: fixed;
    z-index: 200;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: url(../images/backgrounds/mobile-nav-clouds.jpg) no-repeat bottom center #26CCF0;
    background-size: 100% auto;
    -webkit-overflow-scrolling: touch;
    animation: animatefade 1s;
}
.modal-map {
    background: transparent;
}
.modal.display,
.modal-map.display {
    display: block;
    animation: animatefade 1s;
}
.modal-content {
    margin: auto;
    padding: 20px 0;
    width: 95%;
    animation: animatefade 1s;
    position: relative;
    text-align: left;
}
.modal-map .modal-content {
    padding: 20px;
    max-width: 400px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.1);
}
.modal-content ul {
    list-style: none;
    margin: 50px 0 0;
    width: 33.33%;
}
.modal-content ul li {
    margin: 10px 0;
    padding: 0;
}
.modal-content ul li.tiny-heading {
    color: white;
}
.modal-content .tiny-heading {
    padding-left: 0;
}
.modal-content .modal-logo {
    width: 209px;
    height: 50px;
}
.modal-content .modal-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.modal-content .modal-buttons {
    margin-top: 50px;
}
.modal-content .modal-buttons .btn {
    margin-right: 20px;
}
.close {
    width: 30px;
    height: 30px;
}
.modal-map .close {
    position: absolute;
    top: 10px;
    right: 10px;
}
.close img {
    width: 30px;
}
.close:hover,
.close:focus {
    color: #d27d3b;
    text-decoration: none;
    cursor: pointer;
}
@keyframes animatefade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/*MODIFIERS*/
.left {
    text-align: left;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.justify {
	text-align: justify;
}

.mw-1520 {
    max-width: 1520px;
}
.mw-1200 {
    max-width: 1200px;
}
.mw-960 {
    max-width: 960px;
}

.br-20 {
    border-radius: 20px;
}

.pt-1 {
    padding-top: 1%;
}
.pt-5 {
    padding-top: 5%;
}
.pt-10 {
    padding-top: 10%;
}
.pb-1 {
    padding-bottom: 1%;
}
.pb-5 {
    padding-bottom: 5%;
}
.pb-10 {
    padding-bottom: 10%;
}
.pl-50 {
    padding-left: 50%;
}
.pr-50 {
    padding-right: 50%;
}

.hours {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
    clear: both;
    width: 100%;
    max-width: 532px;
}
.hours p:first-child {
    float: left;
}
.hours p:nth-child(2) {
    float: right;
}

.mt-1 {
    margin-top: 1%;
}
.mt-5 {
    margin-top: 5%;
}
.mt-10 {
    margin-top: 10%;
}
.mb-1 {
    margin-bottom: 1%;
}
.mb-5 {
    margin-bottom: 5%;
}
.mb-10 {
    margin-bottom: 10%;
}

.img-br {
    width: 50%;
    max-width: 768px;
    height: 100%;
    max-height: 600px;
    position: absolute;
    right: 0;
    top: 10%;
    border-radius: 20px 0 0 20px;
    object-fit: cover;
    object-position: top center;
}
.img-bl {
    width: 50%;
    max-width: 768px;
    height: 100%;
    max-height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 20px 20px 0;
    object-fit: cover;
    object-position: top center;
}
.img-tr {
    width: 50%;
    max-width: 768px;
    height: 100%;
    max-height: 600px;
    position: absolute;
    right: 0;
    top: -10%;
    border-radius: 20px 0 0 20px;
    object-fit: cover;
    object-position: top center;
}
.img-tl {
    width: 50%;
    max-width: 768px;
    height: 100%;
    max-height: 600px;
    position: absolute;
    left: 0;
    top: -10%;
    border-radius: 0 20px 20px 0;
    object-fit: cover;
    object-position: top center;
}
.img-l {
    width: 50%;
    max-width: 768px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0 20px 20px 0;
    object-fit: cover;
    object-position: top center;
}

.ftlt {
    float: left;
}
.ftrt {
    float: right;
}
.clear {
    clear: both;
}

.flex,
.flex-m,
.flex-m-c {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.flex-m {
    align-items: center;
}
.flex-m-c {
    justify-content: center;
    align-items: center;
}

.heading {
    font-size: 85px;
    font-weight: 600;
    line-height: 120%;
}
.sub-heading {
    font-size: 52px;
    font-weight: 600;
    line-height: 120%;
}
.small-heading {
	font-size: 36px;
    font-weight: 600;
    line-height: 120%;
}
.tiny-heading {
    font-size: 24px;
    font-weight: 600;
    line-height: 120%;
}

.black {
    color: #002139;
}
.blue {
    color: #26CCF0;
}
.ice {
    color: #ECFCFF;
}
.white {
    color: white;
}
.op-5 {
    opacity: .5;
}

.bg-blue {
    background: #26CCF0;
    color: white;
}
.bg-ice {
    background: #ECFCFF;
}
.gr-ice {
    background: linear-gradient(#ECFCFF, white);
}

.hidden {
    display: none;
}


/*MEDIA QUERIES*/
@media (max-width:1250px) {
    .video {
        padding-bottom: 55%;
    }

    .tile-icon-text-1-2 {
        width: calc(50% - 20px);
    }
    .tile-icon-text-1-3 {
        width: calc(33.33% - 20px);
    }
}


@media (max-width:1024px) {
    header .logo {
        max-width: 200px;
    }
    header nav ul li {
        margin: 0 10px;
    }
    header nav ul li .dropdown-menu {
        top: 90px;
    }
    header .buttons .btn-primary {
        margin-right: 10px;
    }

    footer .col15n {
        width: calc(33.33% - 20px);
    }

    .clouds-left {
        background: url(../images/backgrounds/hero-clouds-bottom.jpg) no-repeat center bottom #26CCF0;
        background-size: 100% auto;
    }
    .clouds-right {
        background: url(../images/backgrounds/hero-clouds-bottom.jpg) no-repeat center bottom #26CCF0;
        background-size: 100% auto;
    }

    .hero {
        padding: 150px 0 300px;
    }
    .hero .content {
        padding-left: 0;
        padding-right: 0;
    }
    .home-hero-img {
        width: 90%;
        max-width: 532px;
        top: 300px;
        left: auto;
        right: 0;
    }
    .ride-hero-img {
        width: 90%;
        max-width: 532px;
        top: 300px;
    }

    #find-us .col12n,
    #sustainability .col12n,
    #technology .col12n,
    #vote .col12n,
    #locations .col12n,
    #city .col12n,
    #priority .col12n,
    #service-details .col12n,
    #featured-blog .col12n {
        width: 100%;
    }
    #service-details img {
        display: none;
    }
    #vote {
        text-align: center;
    }
    .img-br,
    .img-tl,
    .img-tr,
    .img-bl,
    .img-l {
        position: relative;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }
    #sustainability .mb-10 {
        margin-bottom: 0;
    }
    #featured-blog {
        margin-top: 90px;
    }

    .carousel-img {
        width: 350px;
    }
    .carousel-text {
        width: calc(100% - 400px);
    }
}


@media (max-width:960px) {
    header .logo {
        width: 123px;
        max-width: none;
        height: 70px;
        overflow: hidden;
    }
    header .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
    }

    .tile-icon-text-1-3 {
        width: 100%;
    }

    #lifecycle .col12n,
    #lifecycle .col12,
    #climate .col12n,
    #climate .col12,
    #rental .col12n,
    #rental .col12,
    #campus .col12n,
    #campus .col12 {
        width: 100%;
    }
    .flex-m#climate,
    .flex-m#rental {
        flex-direction: column-reverse;
    }

    .city-tile {
        width: calc(50% - 20px);
    }
}


@media (max-width:768px) {
    .btn {
        padding: 7px 15px;
        border-radius: 20px;
        font-size: 14px;
    }

    p,
    li {
        font-size: 16px;
    }
    .heading {
        font-size: 60px;
    }
    .sub-heading {
        font-size: 45px;
    }
    .small-heading {
        font-size: 30px;
    }
    .tiny-heading {
        font-size: 21px;
    }

    header nav,
    header .buttons {
        display: none;
    }
    header .mobile-nav {
        display: block;
    }
    header .logo {
        width: 209px;
        height: 50px;
    }

    footer .col15n {
        width: calc(50% - 20px);
    }
    footer ul.footer-details li {
        display: block;
        margin: 10px 0 0 0;
    }
    footer ul.footer-details li.divider {
        display: none;
    }

    #woman-scooter-phone {
        background: url(../images/backgrounds/woman-scooter-phone-tablet.jpg) no-repeat center right #26CCF0;
        background-size: contain;
    }
    #woman-helmet {
        background: url(../images/backgrounds/woman-helmet-tablet.jpg) no-repeat center right #26CCF0;
        background-size: contain;
    }
    #girl-scooter-lake {
        background: url(../images/backgrounds/girl-scooter-lake-tablet.jpg) no-repeat center left #26CCF0;
        background-size: contain;
    }
    #man-scooter-phone {
        background: url(../images/backgrounds/man-scooter-phone-tablet.jpg) no-repeat center right #26CCF0;
        background-size: contain;
    }
    #woman-scooter-phone .col12n,
    #man-scooter-phone .col12n,
    #woman-helmet .col12n {
        width: calc(100% - 200px);
    }
    #girl-scooter-lake .col12n {
        width: 100%;
        padding-left: 150px;
    }

    .tile-icon-text-1-2 {
        width: 100%;
        text-align: center;
    }

    #sustainability,
    #technology {
        text-align: center;
    }

    #locations {
        text-align: center;
    }

    .p-static-100 {
        padding-top: 100px !important;
    }

    .carousel-img {
        width: 250px;
        margin: 0 auto 20px;
    }
    .carousel-text {
        width: 100%;
    }
    .item {
        text-align: center;
        padding-bottom: 20px;
    }
    #features .flex-m {
        flex-direction: column-reverse;
    }
    #featured-blog,
    #featured-blog-post {
        margin-top: 90px;
    }

    #download {
        text-align: center;
        background: rgb(38,204,240);
        background: -moz-linear-gradient(180deg, rgba(38,204,240,1) 75%, rgba(255,255,255,1) 75%);
        background: -webkit-linear-gradient(180deg, rgba(38,204,240,1) 75%, rgba(255,255,255,1) 75%);
        background: linear-gradient(180deg, rgba(38,204,240,1) 75%, rgba(255,255,255,1) 75%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#26ccf0",endColorstr="#ffffff",GradientType=1);
        padding-top: 10%;
    }
    .download-text {
        width: 100%;
    }
    .phone-img {
        width: 300px;
        margin: 20px auto 0;
    }
}


@media (max-width:532px) {
    .hero {
        padding: 150px 0 60%;
    }

    footer .footer-logo {
        display: none;
    }
    footer .top .app-buttons img {
        margin: 0 10px 0 0;
    }

    .modal-content ul {
        width: 50%;
    }

    #woman-scooter-phone {
        background: url(../images/backgrounds/woman-scooter-phone-mobile.jpg) no-repeat center right #26CCF0;
        background-size: contain;
    }
    #woman-helmet {
        background: url(../images/backgrounds/woman-helmet-mobile.jpg) no-repeat center right #26CCF0;
        background-size: contain;
    }
    #girl-scooter-lake {
        background: url(../images/backgrounds/girl-scooter-lake-mobile.jpg) no-repeat center left #26CCF0;
        background-size: contain;
    }
    #man-scooter-phone {
        background: url(../images/backgrounds/man-scooter-phone-mobile.jpg) no-repeat center right #26CCF0;
        background-size: contain;
    }
    #woman-scooter-phone .col12n,
    #man-scooter-phone .col12n,
    #woman-helmet .col12n {
        width: calc(100% - 100px);
    }
    #girl-scooter-lake .col12n {
        padding-left: 50px;
    }

    .bt-100 {
        border-top: 25px solid #ECFCFF;
    }

    ul.ca-lt-mj li {
        display: block;
    }

    .city-tile {
        width: calc(50% - 10px);
    }

    #featured-blog-post .col12n {
        width: 50%;
    }
}


@media (max-width:414px) {
    .heading {
        font-size: 48px;
    }
    .sub-heading {
        font-size: 36px;
    }
    .small-heading {
        font-size: 24px;
    }
    .tiny-heading {
        font-size: 18px;
    }

    .modal-content ul {
        width: 100%;
        margin: 20px 0 0;
    }    
}