.relative-container {
    position:relative;
    width:100%;
    height:100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.FranceMapTabs table {
    table-layout:fixed;
    width:100%;
}


.FranceMapTabs table button {
    max-width:100%;
}

.FranceMapTabs table,
.FranceMapTabs table tr,
.FranceMapTabs table td,
.FranceMapTabs table button,
.FranceMapTabs table img {
    padding:0;
    margin:0;
    border:none;
    background:none;
    height:auto;
}
@media (max-width: 480px) {
    .FranceMapTabs table tr td {
        word-wrap: break-word;
        display: inline-block;
        width:50%;
    }
}



.FranceMap {
    max-width:600px;
    max-height:780px;
    width:100%;
    height:100%;
    min-height:100px;
    -webkit-transition:all 1s; /* Safari */
    transition: all 1s;
    background-repeat: no-repeat;
    background-size: contain;
    position:relative;
    float:left;
}

.FranceMap.no-pos {
    position:static;
}

.FranceMap .icon {
    -webkit-transition:all .5s ease; /* Safari */
    transition: all .5s ease;
    position:absolute;
    -ms-transform: scale(0); /* IE 9 */
    -webkit-transform: scale(0); /* Safari */
    transform: scale(0);
    z-index:2;
}

.FranceMap .icon.show {
    -ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari */
    transform: scale(1,1);
    display:inline-block;
}

.FranceMap .icon:hover {
    animation: bounce 1s infinite;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
}

.FranceMap .hide {
    opacity:0;
    -webkit-transition:all 1s ease; /* Safari */
    transition: all 1s ease;
}

.FranceMap .show {
    opacity:1;
    -webkit-transition:all 1s ease; /* Safari */
    transition: all 1s ease;
}

#FranceMapTitle .mapHeadlineTtl {
    text-transform:uppercase;
    font-size:28px;
    font-weight:bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 5px;
}

#FranceMapTitle .mapHeadline {
    -webkit-transition:all .5s ease; /* Safari */
    transition: all .5s ease;
    display:inline-block;
    -webkit-transform : scale(1);
    -o-transform : scale(1);
    -moz-transform : scale(1);
    -ms-transform : scale(1);
    transform: scale(1);
}

#FranceMapTitle .mapHeadline.shrink {
    -webkit-transform : scale(0);
    -o-transform : scale(0);
    -moz-transform : scale(0);
    -ms-transform : scale(0);
    transform: scale(0);
}

/* Sidebar */
.FranceMapSide {
    width:1px;
    position:absolute;
    right:0;
    top:0;
    -webkit-transition:all 1s; /* Safari */
    transition: all 1s;
    box-sizing:border-box;
    overflow-y:scroll;
}

.FranceMapSide .inner {
    -webkit-transition:all .5s; /* Safari */
    transition: all .5s;
    opacity:0;
}

.FranceMapSide .inner.show {
    opacity:1;
}

.FranceMapSide a.map-side-link {
    background: #141414;
    text-transform:uppercase;
    display:inline-block;
    padding:2px 10px;
    font-size:13px;
    color:white;
}

.FranceMapSide ul.map-side-ul {
    margin:5px 0;
}

.FranceMapSide ul.map-side-ul li {
    list-style-type:none;
    margin:0;
    padding:0;
}

.FranceMapSide ul.map-side-ul li:before {
    content:"›";
    font-size:20px;
    color:#fa4e78;
    padding-right:10px;
}

.FranceMapSide ul.map-side-ul li a {
    color:#222;
}

.FranceMapSide ul.map-side-ul li a:hover {
    color:#004e82;
}

.FranceMapSide .map-side-subtitle {
    text-transform:uppercase;
    color:#7bb3c4;
    margin:25px 0 15px 0;
    display:block;
}

@media (max-width: 780px) {
    .FranceMapSide {
        position:absolute;
        right:0;
        top:0;
        z-index:5;
        background:white;
        width:25px;
        opacity:0;
    }
    .FranceMapSide.open {
        width:300px;
        opacity:1;
    }
    .open-map-sidebar {
        -webkit-transition:all 1s; /* Safari */
        transition: all 1s;
        position:absolute;
        right:25px;
        opacity:0;
        cursor:default;
        z-index:3;

    }
    .open-map-sidebar.open {
        right:300px;
        opacity:1;
        cursor:pointer;
        background:#004e82;
        color:white;
        font-weight:bold;
        width:50px;
        height:50px;
        text-align:center;
        border:none;
        box-shadow:none;
    }
    .FranceMapSide h4.block-title {
        width:282px;
    }
    .FranceMapSide .td-block-span12 {
        width:252px;
    }
}

.FranceMapSide .inner {
    padding:0 15px;
}

.FranceMapSide .td-module-thumb {
    max-width:100px;
}

.FranceMapSide .td-module-thumb img[height] {
    height:100%;
    max-height:70px !important;
}

.FranceMapSide.open {
    border-left: 1px solid #bde0ea;
    border-right: 1px solid #bde0ea;
    box-sizing:border-box;
    padding-left: 8px;
    padding-right: 8px;
}

.FranceMapSide .map-title {
    text-transform:uppercase;
    font-size:22px;
    font-weight:bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom:10px;
}

/** Bounce Effect Anim **/
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-15px);}
    60% {-webkit-transform: translateY(-8px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-15px);}
    60% {-moz-transform: translateY(-8px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-15px);}
    60% {-o-transform: translateY(-8px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-15px);}
    60% {transform: translateY(-8px);}
}