/*

	 Organic Tabs

	 by Chris Coyier

	 http://css-tricks.com

*/



/* Generic Utility */

.hide { position: absolute; top: -9999px; left: -9999px; }

a.goto { display: block; margin-top: -40px; padding-top: 40px; border-bottom: none; }

/*--------------------amenities--------------------*/



#amenities .list-wrap { padding: 0; }

#amenities .nav { list-style: none; padding: 0; margin-top: 3px; }



#amenities ul li a { display: block; border-bottom: none; }

#amenities ul li a:hover { color: black; font-weight: bold; }

#amenities ul li:last-child a { border: none; }



#amenities .nav { overflow: hidden; }

#amenities .nav li { min-width: 80px; border-right: 1px dotted #666; float: left; margin: 0; text-transform: uppercase; padding-left: 10px; }

#amenities .nav li.last { margin-right: 0; border-right: none; }

#amenities .nav li a { display: block; color: #777; text-align: left; }



#amenities li a.current,#amenities li a.current:hover { color: #000; font-weight: bold; }



/*------------------end amenities------------------*/



/*--------------------howto--------------------*/



#howto {

	padding: 0 10px;

}

#howto .list-wrap { padding: 0; }

#howto .nav { list-style: none; padding: 0; margin-top: 3px; }



#howto ul li a { display: block; border-bottom: none; }

#howto ul li a:hover {

    font-weight: bold;

    filter: grayscale(0%);

    filter: none;

    transition: 1s ease;

}

/* #howto ul li:last-child a { border: none; } */



#howto .nav { overflow: hidden; text-align: center; }

#howto .nav li { display: inline-block; text-transform: uppercase; }

#howto .nav li a {

    filter: grayscale(75%);

    display: block;

    border-radius: 50%;

    width: 5em;

    height: 5em;

    line-height: 5em;

    text-align: center;

    color: #ffffff;

    margin: 10px;

    font-size: .8em;

 }

#howto .nav-one {

    margin-left: auto;

    background-color: #660066;

    background: url("../images/ride_bg.png") no-repeat center;

    background-size: 100%;

}

#howto .nav-two {

    background-color: #3353A6;

    background: url("../images/pay_bg.png") no-repeat center;

    background-size: 100%;

}

#howto .nav-three {

    margin-right: auto;

    background-color: #00A8E7;

    background: url("../images/bikeride_bg.png") no-repeat center;

    background-size: 100%;

}



#howto li a.current,#amenities li a.current:hover {

    color: #ffffff;

    font-weight: bold;

    filter: none;

}

#ride h3, #bike h3 {

    border-bottom: #2A2A2A 2px solid;

}

#ride ul, #bike ul {

	overflow: hidden;

}



/*------------------end howto------------------*/



/*-----------------routes---------------------*/

#routes .list-wrap { padding: 0; margin-top: -11px; }

#routes .nav {line-height: 2.8em; font-size: calc(.3em + 1vw); }

#routes div { padding: 15px; color: white; overflow: hidden; }

#routes #mesa { background-color: #00A8E7; }

#routes #alameda { background-color: #B0C72C; }

#routes #dyer { background-color: #660066; }

#routes #montana {

	background-color: #FF6E00;

	padding-right: 45px;

}



/*#routes ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }*/

#routes ul li a:hover { font-weight: bold; }

#routes ul li.mesa a {background-color: #79CAE6; border-bottom: none; }

#routes ul li.alameda a {background-color: #CED894; border-bottom: none; }

#routes ul li.dyer a {background-color: #A778A6; border-bottom: none; }

#routes ul li.montana a {

	background-color: #FF994C;

	border-bottom: none;

}

/*#routes ul li:last-child a { border: none; }*/



#routes .nav { overflow: hidden; padding: 0; }

#routes .nav ul { list-style: none; }

#routes .nav li { min-width: 60px; width: 25%; float: left; margin: 0; text-transform: uppercase; list-style: none; padding: 0; }



@media only screen and (max-width: 330px) {

	#routes .nav li {font-size: .8em; }

}

#routes .nav li.last { margin-right: 0; }

#routes .nav li a { display: block; padding: 5px; color: white; text-align: center; }



#routes li a.current,#routes li a.current:hover { color: white; font-weight: bold; }

#routes .mesa a.current { background-color: #00A8E7 !important; }

#routes .alameda a.current { background-color: #B0C72C !important; }

#routes .dyer a.current { background-color: #660066 !important; }

#routes .montana a.current { background-color: #FF6E00 !important; }



@media only screen and (min-width: 651px) {

    #howto .nav li a {

        border-radius: 50%;

        width: 6.5em;

        height: 6.5em;

        line-height: 6.5em;

        font-size: 1.1em;

    }

}