/*
-------------------------------
Medium Screens  1024px to 601px
-------------------------------
*/





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

    .logo img{
        height: auto;
        width: auto;
    }


    section.join-our-team{
        flex-direction: column;
        
    }
    section.join-our-team .left{
        width: 100%;
        order: 2;
    }

    section.join-our-team .left .left-content{
        padding: 1.5rem;
    }
    section.join-our-team .left .left-content img.mobile-only{
        display: block;
        height: auto;
    }
    section.join-our-team .right img.desktop-only{
        display: none;
    }

    section.join-our-team .right{
        width: 100%;
        order: 1;
    }

    section.join-our-team .left .left-content{
        padding: 1rem;
        max-width: 640px;
        margin: auto;
    }

    section.join-our-team h2{
        font-size: 1.4rem;
        text-align: center;
    }
    section.join-our-team img.mobile-only{
        margin: auto;
        margin-bottom: 1rem;
    }

    section.join-our-team p{
        font-size: 1rem;
        line-height: 1.5rem;
    }

    section.join-our-team .btn{
        margin: auto;
        display: block;
        max-width: fit-content;
        margin-bottom: 2rem;
    }











} /* 1024 */





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

	/* Homepage - Tabs */

	/* .tabs-content{
	    height: auto;
		}

		.tabs-content .tab{
			padding: 30px 2% 0;
			text-align: center;
			}

			#tab-schedule .tabs-content-left{
			    float: none;
			    margin: 0 auto;
			    max-width: 500px;
			    text-align: center;
			    width: 100%;
				}

			#tab-schedule .tabs-content-right{
				margin: 20px auto 10px;
				position: static;
				}

				#tab-trip .tabs-content-left,
				#tab-track .tabs-content-left,
				#tab-services .tabs-content-left{
					float: none;
					width: 100%;
					}

				#tab-trip .tabs-content-left {
					padding-bottom: 30px;
				}

				#tab-trip .tabs-content-right,
				#tab-track .tabs-content-right,
				#tab-services .tabs-content-right{
					margin: 0 auto;
					padding: 30px 0;
					position: static;
					top: 0;
					width: 96%;
					}

				#tab-schedule{
					margin: 0 auto;
					padding: 30px 0;
					}

					#tab-trip .tab-nav,
					#tab-track .tab-nav,
					#tab-services .tab-nav{
						margin: 0 auto;
						max-width: 400px;
						}

			#tab-services .tab-nav a{
				padding: 10px 25px 10px 40px;
				} */


	/* System Map */

	.page-system-map h1{
	    text-align: center;
		}

	.page-system-map #route_info select{
		display: block;
		}

	#route_info .pnlMap_Legend{
		display: none;
		}

	.pnlGoogleMapAkronMetroroute_info{
		float: none;
		padding: 0;
		text-align: center;
		width: 100%;
		}

		#route_info select{
			background: #fff;
			display: block;
			border: 2px solid #782E8D;
		    border-radius: 5px;
		    color: #8F8E8E;
		    /* font-size: 1.7rem; */
		    font-style: italic;
		    /* margin: 0 auto 10px; */
			/* max-width: 80%; */
		    padding: 7px;
		    width: 500px;
			}

		#route_info select:focus{
			outline: none;
			}

	.bigMap{
	    padding: 15px 0 15px;
		}

		.bigMap .pnlGoogleMapAkronMetromap_canvas{
			float: none;
			height: 450px;
			margin: 0 auto;
			max-width: 80%;
			width: 600px;
			}

        .gm-style .gm-style-iw img{
            display: none;
            }

        .gm-style .gm-style-iw a img{
            display: block;
            }


	/* Route Details */

    .page-route-details #route_info select,
    .page-route-details #route_info span.divRoute_OptionsText{
        /* margin: 0 1rem; */
        width: 90%;
        margin: auto;
        text-align: left;
    }

	.page-route-details #route_info{
		/* height: 337px;
		padding: 25px 2%; */
		}

		.page-route-details #divRoute_Options .pnlRoute_OptionsRouteDesc {
		    display: block;
		    /* font: 2.6rem/2.6rem montserratregular, arial, sans-serif; */
		    margin-bottom: 20px;
		    line-height: 2.9rem;
			}

			.page-route-details .pnlRoute_OptionsRouteDescRouteText{
				display: block;
				font-size: 2rem;
				}

		.page-route-details #divRoute_Options .divRoute_OptionsText{
		    display: block;
		    margin-bottom: 5px;
			text-align: left;
		    width: 85px;
			}

		.page-route-details #divRoute_Options select {
		    /* margin-bottom: 0; */
		    /* margin-left: 0; */
		    /* max-width: 100%;
		    width: 100%; */
			}

			.page-route-details table{
			    margin: 0 auto;
			    width: 100%;
				}

	/* Advertising Page */

	.page-advertising .pnlAMBusAdvert,
	.page-advertising #ctl00_mainContent_ctl02_divContent,
	.page-advertising .csFlexFrmWrapModule{
		display: none;
		}

	/* Mobile Copy */

	.page-advertising .mobile-text{
		display: block;
		}






} /* 1000 */





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



	body{
		padding-top: 140px;
	}
    
	/* Header */

    .logo{
        display: block;
        margin: 1rem;
    }
    

	.header-phone{
        padding: 10px 12px 14px 10px;
    }

    .header-links {
        margin-right: 0;
    }

    .header-nav,
    .header-social-nav{
        display: none;
    }

    .ie8 .mnt-text{
        padding: 15px 0 14px;
    }

    .mnt-icon{
        margin: 34px 16px 0 16px;
        width: 36px;
        height: 24px;
    }

    .mnt-icon .menu-label{
        font-size: 0.75rem;
        top: -30px;
    }

    .mnt-icon span{
        height: 3px;
    }

    .mnt-icon span:nth-child(2){
        top: 9px;
    }

    .mnt-icon span:nth-child(3){
        top: 18px;
    }

    .main-nav-toggle.open .mnt-icon span:nth-child(3) {
        -webkit-transform: translate(5px,4px) rotate(-45deg);
        -moz-transform: translate(5px,4px) rotate(-45deg);
        -o-transform: translate(5px,4px) rotate(-45deg);
        transform: translate(5px,4px) rotate(-45deg);
    }


	/* Main Nav / Push Menu */

	.main-nav{
    padding-top: 61px;
    }

    .header-alert-bar .container{
        justify-content: space-around;
    }

    .header-alert-bar .container.alert-list a{
        font-size: 1.0rem;
    }
    .container.alert-list li span:before{
        vertical-align: -6px;
    }



    .home-page-hero .route-schedules input.bin-button{
        margin-bottom: 0;
    }


    .home-page-hero .route-schedules{
        width: 100%;
    }

    .home-page-hero .route-schedules:hover{
        background: #000;
    }

    .home-page-hero .route-schedules select{
        /* max-width: calc(90% - 6rem);
        margin-top: 2rem;
        font-size: 1.125rem; */
    }

    .home-page-hero .route-schedules input.bin-button{
        font-size: 1.125rem;
    }

    .home-page-hero .hero-links a {
        padding: 2rem 0;
        max-width: 18rem;
        text-align: left;
    }

    .home-page-hero .hero-links a:first-of-type{
        border-bottom: 0px solid transparent;
    }
    .home-page-hero .hero-links a:first-of-type:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: -25%;
        width: 150%;
        border-bottom: 1px solid #fff;
        display: block;
    }

    .home-page-hero .hero-links{
        border-left: none;
        margin: 0px auto;
        max-width: 24rem;
        font-size: 1.125rem;
    }

    .home-page-hero .hero-links .trip-planner:before,
    .home-page-hero .hero-links .track-your-bus:before{
        width: 3rem;
        height: 3rem;
        vertical-align: -1.25rem;
    }

    .home-page-hero .hero-links a:hover{
        background: #000;
    }

    .home-page-hero .hero-links a span:before{
        vertical-align: -0.25rem;
        margin-left: 1rem;
    }

    .slide .slide-contents .slide-title{
        font-size: 1.5rem;
    }

    .slide .slide-contents .slide-title:before{
        font-size: 2rem;
    }
    section.hp-our-services-e-spot{
        padding: 1rem 2rem;
    }
    section.hp-our-services-e-spot h2.headline-container{
        font-size: 1.25rem;
        text-align: left !important;
        padding-left: 0;
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    section.hp-our-services-e-spot .flex-col,
    section.hp-our-services-e-spot .flex-col.col-3{
        width: 100%;
        margin-bottom: 5rem;
        
    }

    section.hp-our-services-e-spot .flex-col .col-content{
        padding: 0;
        padding-bottom: 1.5rem;
    }

    section.hp-our-services-e-spot .metro-direct .col-content{
        border-left: unset;
        border-bottom: 3px solid #EE3524;
    }

    section.hp-our-services-e-spot .metro-select .col-content{
        border-left: unset;
        border-bottom: 3px solid #781D7E;
    }
    
    section.hp-our-services-e-spot .metro-ada .col-content{
        border-left: unset;
        /* border-bottom: 3px solid #000000; */
        padding-bottom: 0;
    }

    section.hp-our-services-e-spot p,
    section.hp-our-services-e-spot ul > li{
        letter-spacing: 0.8px;
        font-size: 1rem;
        line-height: 1.5rem;
    }



    section.hp-our-services-e-spot p:last-of-type{
        margin-bottom: 0;
    }


    .slide-contents{
        padding-right: 1rem;
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    







    .RouteOptionalText{
        font-size: 1rem !important;
        padding: 1rem 0;
        letter-spacing: 0.05rem;
    }

    .page-route-details #divRoute_Options .pnlRoute_OptionsRouteDesc span.pnlRoute_OptionsRouteDescRouteNum{
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .page-route-details .pnlRoute_OptionsRouteDescRouteText{
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 0.5rem;
    }

    .pnlMetroRouteSelector select,
    #route_info select {
        font-size: 0.925rem !important;

    }

    .route-details-title{
        font-size: 0.925rem !important;
    }

    .divWrapRouteGridHeading {
        margin: 1.5rem 2% 0;
        font-size: 1rem;
        line-height: 1rem;
        padding: 0.5rem 0;
    }

    .route-details-title {
        padding: 0.65rem 1.5rem;
        text-align: center;
        font-weight: 500;
        letter-spacing: 0.025rem;
        font-size: 0.85rem;
        line-height: 1rem !important;
        }
    
        .route-details-title:before{
            left: 0.25rem;
        }

        .page-route-details .btnShowSchedule{
            font-size: 1rem;
            padding: 0.5rem 1.5rem;
        }

        .route-details-time-list div{
            font-size: 0.85rem;
            padding: 0px;
        }


        .mrta-buttons {
            padding-bottom: 1rem;
            }
            .mrta-buttons .btn{
                margin: 0.5rem auto;
                padding: 0.25rem 0;
                width: 80%;
                text-align: center;
                font-size: 1rem;
            }



} /* 950 */





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

	/* Main Nav / Push Menu */


	body.open{
		overflow: hidden;
		}

		header{
			background: none;
			}

		.open header{
			height: 100%;
			overflow-y: scroll;
			}

			header > div{
				background-color: #fff;
				position: relative;
				z-index: 505;
				}

			.main-nav{
				background-color: #781D7E;
				margin-right: -150%;
				padding: 0;
				position: absolute;
				right: 0 !important;
				/* top: 55px; */
				transition: margin-right .5s;
				width: 100%;
				z-index: 9999;
				}

			.open .main-nav{
				/*top: 0;*/
				margin-right: 0;
				}

				/* override scrollbar styles */

				.mCustomScrollBox{
					overflow: visible !important;
					height: auto !important;
					}

			.open main,
			.open footer{
				padding-right: 0;
				}
    /*Circle Icons */
        .circle-icon-container {
            flex-wrap: wrap;
            max-width: 533px;
            margin: 0 auto;
            }
            .circle-icon {
                flex-basis: 40%;
                margin-bottom: 10px;
                }
                .circle-icon:hover {opacity: 1;}

	/* Board members */

	.member-image {
		width: 80%;
	}

	.member-info {
		flex: 0 1 100%;
	}

    .gallery-wrap:before{
        display: block;
    }
    
    .slide .slide-image{
        display: none;
    }

    .slide .slide-contents{
        width: 64%;
        margin: auto;
    }

    .slide .slide-contents .slide-title{
        color: #781D7E;
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.25rem;
        margin-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .slide .slide-contents .slide-title:before{
        display: none;
    }

    .slide .slide-contents .slide-copy p{
        font-size: 1.125rem;
        line-height: 1.25rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
    }

    .gallery-wrap .gallery-indication{
        bottom: 1rem;
        position: absolute;
        right: 0%;
        width: 85%;
        }





} /* 800 */





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




    /*footer */

    .footer-wrap {
        padding: 4rem 2rem;
    }

    .footer-flex .footer-logo{
        order: 1;
        margin-bottom: 2rem;
    }

    .footer-flex .footer-nav{
        order: 2;
        flex-direction: column;
    }

    .footer-flex .footer-contact{
        order: 3;


    }
    .footer-wrap .footer-flex .footer-contact .fc-social a:not(.btn){
        font-size: 2rem;     
    }

    footer .footer-wrap .footer-lang.btn{
        padding: 0 !important;
    }

    footer .footer-bar > div{
        margin-bottom: 1rem;
    }



	/* Route Details */

	.page-route-details .smallMap{
	    display: none;
		}

	.page-route-details #route_info{
	    height: auto;
	    /* padding: 25px 2%;
	    width: 94%; */
		}


	/* Search Results */

	.searchresultsummary{
		float: none;
		}

} /* 750 */





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

	/* Header */

	.header-nav{
		display: none;
		}


} /* 735 */





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



	/* 2 & 3 Column Layout (added via TinyMCE) */

    .col-item,
	.col-item:first-child,
	.col-row.three-columns .col-item{
        padding: 0 0 30px;
		text-align: center;
        width: 100%;
        }

		.col-item img{
			display: block;
		    margin: 0 auto;
		    max-width: 400px;
			}


	/* Homepage - News */

	.gallery-nav{
		top: 50%;
		}

} /* 635 */