.map-home { display: none; }

@media only screen and (min-width: 64em) {

    .fullWidth { width: 100%; margin-left: auto; margin-right: auto; max-width: initial; }

    .map-home { display: block; }

    .map-home h2 { font-size: 2.75rem; line-height: 2.5625rem; text-transform: uppercase; font-family: FFDINWebPro; }

    .map-home h5 { font-size: 1.125rem; text-transform: uppercase; font-family: FFDINWebPro; color: #777; margin: 0; }

    .map-home h6 { font-size: .625rem; text-transform: uppercase; color: #777; font-family: FFDINWebPro; }

    .map-home ul { margin: 0; padding: 0; }

    .map-home ul li { font-size: 1.25rem; line-height: 1.65rem; list-style-type: none; }

    .map-home .fullWidth { height: 750px; overflow: visible; position: relative; background-color: #f1f1f1; }

    .map-home .fullWidth .map-home-angles { position: absolute; top: 0; right: 0; }

    .map-home .tabs { position: relative; }

    .map-home .content h2.tab-title { margin-bottom: 125px; }

    .map-home .tabs li { width: 20%; height: 75px; text-align: center; text-transform: uppercase; }

    .map-home .tabs .tab-title a,
    .map-home .tabs .tab-title.active a { font-family: FFDINWebPro; color: #777; font-size: .825rem; line-height: 1rem; padding-top: 1.35rem; padding-bottom: 0; }

    .map-home .tabs .tab-title a span { display: block; }

    .map-home .tabs dd > a:hover,
    .map-home .tabs .tab-title > a:hover { background-color: #fff; }

    .map-home .tabs .tab-title a { background-color: #fff; }

    .map-home .tabs .tab-title.active { border-bottom: 5px solid #0099aa; }

    .map-home .tabs .tab-title.active::after { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #0099aa; position: absolute; bottom: -20px; z-index: 15; left: 50%; margin-left: -10px; }

    .map-home .tabs-content { background: url(../imgs/map-home/map-home-bkg.png) no-repeat center center; height: 750px; margin-bottom: 0px; }

    .map-home .tabs-content > .content { padding-top: 85px; height: 750px; font-family: FFDINWebProLight; text-align: left; }

    .map-home .content .row.second { margin-top: 35px; }

    .map-home .content img { margin-bottom: 20px; }

    .map-home .content h3 { text-transform: uppercase; font-family: FFDINWebProBold; font-size: 1rem; margin-bottom: 25px; }

    .map-home .content p { font-size: .875rem; line-height: 1.125rem; }

    .map-home .content a { font-size: .75rem; line-height: .75rem; text-transform: uppercase; padding: 10px 15px; display: inline-block; margin-top: 10px; font-family: FFDINWebProBold; -webkit-transition: all .5s; /* Safari */ transition: all .5s; }

    /*Panel 1*/

    .map-home #panel-map-1 h2, .map-home #panel-map-1 ul li { color: #0099aa; }

    /*Panel 2*/

    .map-home .tabs .tab-title.active.tab2::after { border-top-color: #550088; }

    .map-home .tabs .tab-title.active.tab2 { border-color: #550088; }

    .map-home #panel-map-2 h2, .map-home #panel-map-2 ul li { color: #550088; }

    /*Panel 3*/

    .map-home .tabs .tab-title.active.tab3::after { border-top-color: #DC6B2F; }

    .map-home .tabs .tab-title.active.tab3 { border-color: #DC6B2F; }

    .map-home #panel-map-3 h2, .map-home #panel-map-3 ul li { color: #DC6B2F; }

    /*Panel 4*/

    .map-home .tabs .tab-title.active.tab4::after { border-top-color: #88BB44; }

    .map-home .tabs .tab-title.active.tab4 { border-color: #88BB44; }
    .map-home #panel-map-2 { background: url(../imgs/map-home/map-home-north-america.png) no-repeat center center; }
    .map-home #panel-map-3 { background: url(../imgs/map-home/map-home-latin-america.png) no-repeat center center; }
    .map-home #panel-map-4 { background: url(../imgs/map-home/map-home-europe.png) no-repeat center center; }
    .map-home #panel-map-5 { background: url(../imgs/map-home/map-home-asia-pacific.png) no-repeat center center; }

    .map-home #panel-map-4 h2 { color: #88BB44; }

    .map-home #panel-map-4 .row.second { position: relative; }

    .map-home #panel-map-4 .row.second div:last-of-type { position: absolute; bottom: 0; }

    /*Panel 5*/

    .map-home .tabs .tab-title.active.tab5::after { border-top-color: #991155; }

    .map-home .tabs .tab-title.active.tab5 { border-color: #991155; }

    .map-home #panel-map-5 h2, .map-home #panel-map-5 ul li { color: #991155; }
}

/***** 768px breakpoint *****/
@media only screen and (min-width: 48.0625em) {

    /*.map-home {display:block;} */

    .tabs { height: 57px; }

    .tabs .tab-title a,
    .tabs .tab-title.active a { height: 57px; font-size: 1.25rem; line-height: 1.5rem; padding-top: 1rem; }

    .tabs .tab-title a span { display: inline-block; }
}

/***** 1200px breakpoint *****/
@media only screen and (min-width: 75em) {

    .map-home .tabs li { height: 85px; }

    .map-home .tabs .tab-title a, .map-home .tabs .tab-title.active a { font-size: 1rem; line-height: 1.25rem; }

    .map-home .tabs .tab-title.active { border-bottom: 8px solid #0099aa; }

    .map-home .tabs .tab-title.active::after { border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #0099aa; bottom: -28px; margin-left: -12px; }
}

li.tab-title a:focus { outline: 0; }

/*TRY FADE IN
http://stackoverflow.com/questions/14337948/fade-in-tabs-in-zurb-foundation
*/

.tabs-content { /*  *zoom: 1;
  margin-bottom: 1.5rem; */ /* Customized */ display: block:important! opacity: 0; }
/* Customized */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/*  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }*/

.tabs-content > .content.active { /* Customized */ -webkit-animation: fadeIn 1s; animation: fadeIn 1s; opacity: 1; display: block; }
