.title-map {
    font-family: 'Satisfy', cursive;
    display: block;
    margin: 40px auto;
    text-align: center;
    width: 100%;
    font-size: 30px;
}

#intro {
    display: block;
}

#intro img {
    display: block;
    width: 100%;
    margin-bottom: 40px;
}

#containerMap {
    display: none;
}
.more{
    width: 5px !important;
    display: block!important;
    position: absolute!important;
    top:6px;
    right:4px;

}
#map {
    display: block;
    margin: 40px auto;
    height: 225px;
    width: 310px;
    background: #fff no-repeat 0 0 url('https://www.doitinparis.com/files/2017/map/italy/carte-italie-mobile.jpg');
    background-size: 310px 225px;
    position: relative;
}

.shareBlock {

}

.shareBlock > a {
    display: inline-block !important;
    width: 34px !important;
    margin-left: 7px;
    margin-right: 7px;;
}

.button-link {
    position: absolute;
}

.button-link.pasta {
    width: 10px;
    height: 11px;
}

.button-link.pizza {
    width: 8px;
    height: 10px;
}

.button-link img {
    display: block;
    width: 100%;
}

.label-link {
    position: absolute;
    font-weight: bold;
    padding: 3px;
    background: #fff;
    display: none;
    z-index: 2;
}

.container-elem {
    width: 100%;
    display: block;
    background: white;
    padding: 20px 30px;
    text-align: left;
    max-width: 1140px;
    margin: 40px auto;
    position: relative
}

.container-elem h3 {
    font-family: 'Satisfy', cursive;
    display: block;
    margin: 40px auto;
    text-align: center;
    width: 100%;
    font-size: 38px;
}

.container-elem img {
    width: 100%;
    display: block;
    margin-bottom: 40px;
}

.container-elem .text {
    text-align: justify;
    font-family: 'Raleway', sans-serif;
    line-height: 1.5;
}

.container-elem .text a {
    text-decoration: underline;
}

.container-elem .text b, .container-elem .text a, .container-elem .text strong {
    font-weight: bold;
    color: #000;
}

#map-turn {
    display: none;
    width: 100%;
    margin: 10px auto;
}

@media all and (max-width: 767px) {
    #map{
        margin-bottom: 0px;
    }

}
@media all and (min-width: 425px) {

    #map {
        height: 290px;
        background-size: 400px 290px;
        width: 400px;
    }

    .button-link.pizza {
        width: 11px;
        height: 13px;
    }

    .button-link.pasta {
        width: 16px;
        height: 18px;
    }
    .label-link {
        font-size: 12px;
    }
}

@media all and (min-width: 538px) and (max-width: 660px) {

    #map {
        /*
        height: 290px;
        background-size: 400px 290px;
        width: 400px;*/
        height: 300px;
        background-size: 432px 300px;
        width: 449px;
        margin-top: 70px;
        position: relative;
        z-index: 1000;
    }

    .button-link.pizza {
        width: 11px;
        height: 13px;
    }

    .button-link.pasta {
        width: 13px;
        height: 14px;
    }
}

@media all and (min-width: 660px) {

    #map {
        height: 375px;
        background-size: 516px 375px;
        width: 516px;
    }

    .button-link.pizza {
        width: 11px;
        height: 13px;
    }

    .button-link.pasta {
        width: 16px;
        height: 18px;
    }
}

@media all and (min-width: 736px) {

    #map {
        height: 400px;
        background-size: 551px 400px;
        width: 551px;
    }

    .button-link.pizza {
        width: 11px;
        height: 13px;
    }

    .button-link.pasta {
        width: 16px;
        height: 18px;
    }
}

@media all and (max-width: 416px) and (orientation: portrait) {
    #map {
        display: none;
    }

    #map-turn {
        display: block;
    }
}

@media all and (max-width: 740px) and (orientation: landscape) {
    #content-header.scrolled {
        display: none !important;
    } #content-header {
        display: none !important;
    }
    .title-map{
        margin-bottom: -49px;
    }
}

@media all and (min-width: 767px) {
    #map {
        background: #fff no-repeat 0 0 url('https://www.doitinparis.com/files/2017/map/italy/carte-italie.jpg');
        height: 522px;
        background-size: 720px 522px;
        width: 720px;
    }

    .button-link.pizza {
        width: 19px;
        height: 23px;
    }

    .button-link.pasta {
        width: 25px;
        height: 26px;
    }

    .title-map {
        font-size: 36px;
    }

    .label-link {
        font-size: 14px;
    }
}

@media all and (min-width: 1024px) {
    #map {
        height: 704px;
        width: 970px;

        background-size: 970px 704px;
    }

    .button-link.pizza {
        width: 26px;
        height: 31px;
    }

    .button-link.pasta {
        width: 33px;
        height: 34px;
    }

    .title-map {
        font-size: 36px;
    }
    .more {
        width: 15px !important;
    }

    .label-link {
        font-size: 17px;
    }
}

@media all and (min-width: 1180px) {
    #map {
        height: 828px;
        width: 1140px;

        background-size: 1140px 828px;
    }

    .button-link.pizza {
        width: 31px;
        height: 37px;
    }

    .button-link.pasta {
        width: 39px;
        height: 41px;
    }

    .title-map {
        font-size: 36px;
    }
}

/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    z-index: 12000;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);

    opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}

/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    transform: translateY(-20px) perspective(600px) rotateX(10deg);

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    -moz-transform: translateY(0) perspective(600px) rotateX(0);
    -ms-transform: translateY(0) perspective(600px) rotateX(0);
    -o-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0);
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
    opacity: 0;

    -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
    opacity: 0;

    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
    opacity: 0;
}

#legende h4 {
    font-family: 'Satisfy', cursive;
    display: block;
    margin: 10px auto;
    text-align: left;
    width: 100%;
    font-size: 26px;
    text-decoration: underline;
}

#legende p {
    font-family: 'Satisfy', cursive;
    display: block;
    margin: 10px auto;
    text-align: left;
    width: 100%;
    font-size: 20px;
}
#legende img {
    width: 20px;
    display: inline-block;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;
}
@media all and (orientation: landscape) {
    #vertImg {
        display: none
    } #horiImg {
        display: block;
    }
}@media all and (orientation: portrait) {
    #vertImg {
        display: block
    } #horiImg {
        display: none;
    }
}