.article-locations { position:relative; background:#FFF url(../img/mapbg.png) no-repeat bottom center; padding-bottom:100px; text-align:center;}
.article-locations .head { padding-top:70px;}
.article-locations .head > *:first-child { margin-top: 0;}
#map-canvas { width:100%; height:100%; position:relative;}

.google-location-map { position:relative; border-top:5px solid #72d6ce;border-bottom:5px solid #72d6ce;margin:0 auto; width:86%;}
.google-map-canvas { height:420px; width:100%; background-color:#f2f2f2;}
.google-location-nav { position:relative; margin-bottom:25px;}
.google-location-nav ul { display:block; margin:0; padding:0; font-size:0;}
.google-location-nav li { display:inline-block; margin:0; padding:0 20px;  border-left:1px solid #72d6ce; position:relative;}
.google-location-nav li:first-child { border-left:none;}
.google-location-nav a { font-size:16px; color:#2c2f36; text-decoration:none; text-transform:uppercase; font-weight:300; display:block; padding:15px 30px;}
.google-location-nav li.active a { font-weight:500; background-color:#e50051; color:#FFF;}
.google-location-nav li.active:after { content:""; display:block; left:50%; bottom:-30px; margin:0 0 0 -15px; width:0; height:0; position:absolute;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #72d6ce;}

.map-marker {font-size: 40px;line-height: 40px;color:#e50051;}
.map-marker-small {font-size: 14px;line-height: 14px; width: 14px;color:#e50051;}
.google-map-info { position: absolute; top: 0; right: 0; height: 100%; z-index:30;}

.marker-description-box { width: 280px; background-color:#FFF; box-shadow:0 0 13px rgba(0,0,0,0.3); font-size: 13px; margin: 20px;}
.marker-description-box .inner { padding: 20px; width: auto; max-width:none; }
.marker-description-box .img {max-height: 120px;overflow: hidden;}
.marker-description-box img { width: 100%; height: auto;}
.marker-description-box .tit { font-size: 21px; line-height:140%; margin:1px 0 10px; text-transform: uppercase;}
.marker-description-box .address { font-size: 13px; line-height: 140%;}
.marker-description-box .pickup { margin-top: 5px; border-top:1px solid #EEE; padding-top: 5px;}
.marker-description-box .pickup strong { font-weight: 500;}
.marker-description-box a { color: #2c2f36;}

@media screen and (max-width:850px) {
    .article-locations .inner h1 { font-size: 34px;}
    .google-location-nav li { padding: 0 10px;}
    .google-location-nav a { padding: 10px 10px;}
}

@media screen and (max-width:650px) {
    .google-location-nav { width: 86%; margin:0 auto;}
    .google-location-nav li { display: block; margin: 0 0 5px 0; padding: 0; border: none;}
    .google-location-nav li.active:after { display: none;}
    .google-location-nav a { border:1px solid #72d6ce;}
    .google-location-nav li.active a { border-color:#e50051;}
    .google-map-canvas { display: none;}
    .google-map-info{ position: relative; height: auto; width: auto;}
    .marker-description-box { width: auto; margin: 0; box-shadow: none; max-width: 280px; margin: 0 auto;}
    .article-locations {background-size:auto 100px;  padding-bottom: 120px;}
    
}
@media screen and (max-width:450px) {
    .article-locations .inner h1 {font-size:22px;}
    .article-locations .inner{ font-size: 13px;}
}