@font-face {
    font-family: 'Raund';
    src: url('../fonts/Raund-Bold-webfont.eot');
    src: url('../fonts/Raund-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Raund-Bold-webfont.woff2') format('woff2'), url('../fonts/Raund-Bold-webfont.woff') format('woff'), url('../fonts/Raund-Bold-webfont.ttf') format('truetype'), url('../fonts/Raund-Bold-webfont.svg#raundbold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Raund';
    src: url('../fonts/Raund-Italic-webfont.eot');
    src: url('../fonts/Raund-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Raund-Italic-webfont.woff2') format('woff2'), url('../fonts/Raund-Italic-webfont.woff') format('woff'), url('../fonts/Raund-Italic-webfont.ttf') format('truetype'), url('../fonts/Raund-Italic-webfont.svg#raunditalic') format('svg');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Raund';
    src: url('../fonts/Raund-webfont.eot');
    src: url('../fonts/Raund-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Raund-webfont.woff2') format('woff2'), url('../fonts/Raund-webfont.woff') format('woff'), url('../fonts/Raund-webfont.ttf') format('truetype'), url('../fonts/Raund-webfont.svg#raundregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

:focus {
    outline: none;
}

.column {
    padding: 0 15px;
}

h1 {
    margin: 0;
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
}

.map-wrapper {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
}

.map {
    position: relative;
    max-width: 500px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 20px
}

.map-wrapper {
    box-shadow: 0 4px 2px -2px #f4f4f4;
    border: 2px solid #CABC95;
    border-right-width: 3px;
    border-bottom-width: 3px;
    margin-bottom: 40px;
}

.map__img {
    display: none;
}

.map__hotspot span {
    position: relative;
    top: -10px;
    left: 9px;
    width: 80px;
    display: block;
    font-size: 14px !important;
}

.map__hotspot_o span {
    position: relative;
    top: -10px;
    left: 9px;
    width: 80px;
    display: block;
}

.map__hotspot span.s_pro:hover {
    color: #FF7300;
}

.map__hotspot {
    display: block;
    background: red;
    cursor: pointer;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    text-decoration: none;
    color: #011852;
}

.map__hotspot_o {
    display: block;
    background: red;
    cursor: pointer;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    text-decoration: none;
    color: #011852;
}

.map__hotspot_o {
    display: block;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    text-decoration: none;
    color: #011852;
}

.map2 {
    position: relative;
    max-width: 430px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

#hagiang_spot {
    left: 34.975%;
    top: 4.85%;
}

#sapa_spot {
    left: 25.975%;
    top: 7.85%;
}

#hanoi_spot {
    right: 56%;
    bottom: 83%;
}

#maichau_spot {
    left: 36.3%;
    top: 17.95%;
}

#halong_spot {
    left: 57.975%;
    top: 15.85%;
}

#haiphong_spot {
    right: 46%;
    bottom: 81%;
}

#ninhbinh_spot {
    right: 54%;
    top: 22%;
}

#donghoi_spot {
    right: 50%;
    top: 38%;
}

#quangtri_spot {
    right: 44%;
    top: 41%;
}

#hue_spot {
    right: 39%;
    bottom: 55%;
}

#danang_spot {
    right: 33.5%;
    bottom: 53%;
}

#hoian_spot {
    right: 31%;
    bottom: 50%;
}

#quynhon_spot {
    right: 22.5%;
    bottom: 39%;
}

#nhatrang_spot {
    right: 23%;
    bottom: 30%;
}

#kontum_spot {
    right: 35%;
    bottom: 42.5%;
}

#buonmathuot_spot {
    right: 34%;
    bottom: 32.4%;
}

#phanthiet_spot {
    right: 33%;
    bottom: 21.5%;
}

#vungtau_spot {
    right: 43%;
    bottom: 18%;
}

#bentre_spot {
    right: 51%;
    bottom: 17%;
}

#cantho_spot {
    right: 57%;
    bottom: 16%;
}

#dalat_spot {
    right: 31%;
    bottom: 28%;
}

#hochiminh_spot {
    right: 47%;
    bottom: 20.5%;
}

#mytho_spot {
    right: 51.2%;
    bottom: 18.3%;
}

#vinhlong_spot {
    right: 55%;
    bottom: 17.5%;
}

#chaudoc_spot {
    right: 63%;
    bottom: 19%;
}

#phuquoc_spot {
    right: 75%;
    bottom: 18%;
}

#condao_spot {
    right: 48%;
    bottom: 8%;
}

#truongsa_spot {
    bottom: 16%;
    right: 23%;
}

#hoangsa_spot {
    bottom: 63%;
    right: 25.5%;
}

#hoangsa_spot span, #truongsa_spot span {
    width: 100px;
}

#north_spot {
    right: 36%;
    top: 10%;
}

#central_spot {
    bottom: 48%;
    right: 81%;
}

#south_spot {
    bottom: 12%;
    right: 36%;
}

#north_spot span, #central_spot span, #south_spot span {
    width: 150px;
}

#cantho_spot span {
    top: 4px;
    left: -35px;
    width: 50px;
}

#mytho_spot span {
    top: -18px;
    left: -25px;
}

#vinhlong_spot span {
    left: -63px;
}

#chaudoc_spot span {
    top: -19px;
    left: -52px;
    width: 80px
}

#phuquoc_spot span {
    top: 4px;
    left: -42px;
}

#buonmathuot_spot span {
    width: 100px
}

#maichau_spot span {
    left: -62px;
}

#kontum_spot span {
    left: -55px;
}

#buonmathuot_spot span {
    top: -20px;
    left: -45px;
}

#bentre_spot span {
    top: 5px;
    left: -4px;
}

#dalat_spot span {
    top: -19px;
    left: -17px;
}

#hochiminh_spot span {
    top: -20px;
    left: -27px;
    width: 100px;
}

/*CHINA*/
#thanhdo_spot {
    right: 50%;
    bottom: 32.4%;
}

#conminh_spot {
    right: 52%;
    bottom: 18.4%;
}

#daily_spot {
    right: 32%;
    bottom: 32.4%;
}

#legiang_spot {
    right: 55%;
    bottom: 25.4%;
}

#shangrila_spot {
    right: 69%;
    bottom: 16.4%;
}

#backinh_spot {
    right: 30%;
    bottom: 60.4%;
}

#thuonghai_spot {
    right: 19%;
    bottom: 38.4%;
}

#hangchau_spot {
    right: 20%;
    bottom: 32.4%;
}

#tochau_spot {
    right: 25%;
    bottom: 38.4%;
}

#tochau_spot span{
    left: -60px;
}

#truonggiagioi_spot {
    right: 36%;
    bottom: 24.4%;
}

#truonggiagioi_spot span{
    width: 105px;
}

#vuhan_spot {
    right: 26%;
    bottom: 19.4%;
}

#vannam_spot {
    right: 56%;
    bottom: 13.4%;
}

#hobac_spot{
    right: 32%;
    bottom: 32.4%;
}

#hobac_spot span{
    top: 3px;
    left: 0px;
}

#trungkhanh_spot{
    right: 43%;
    bottom: 23.4%;
}

#trungkhanh_spot span{
    width: 100px;
}

#tayan_spot{
    right: 41%;
    bottom: 45.4%;
}

#hanoi_spot span {
    top: -20px;
    left: -19px;
}

.map__inner {
    position: relative;
    height: 0;
    padding-bottom: 170%;
}

.map__img {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.map__hotspot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.map__hotspot_o {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.map__hotspot:hover,
.map__hotspot:focus {
    background: #FF7300;
}

.popup {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
}

.popup__inner {
    display: inline-block;
    white-space: nowrap;
    background: #ffd200;
    border: 9px solid #fff;
    border-radius: 4px;
}

.map__hotspot:focus .popup {
    opacity: 1;
    width: auto;
    height: auto;
}

.popup--left-top {
    right: 20px;
    bottom: -1px;
}

.popup--right-top {
    left: 20px;
    bottom: -1px;
}

.popup--left-bottom {
    right: 20px;
    top: -1px;
}

.popup--right-bottom {
    left: 20px;
    top: -1px;
}

.popup__text {
    height: auto;
}

.popup__text br {
    display: block;
}

.description__content p {
    font-size: 30px;
}

#ver {
    background: red;
}

.size {
    background: blue;
    height: 10px;
}

@media (min-width: 768px) and (max-width: 1200px) {
    #ver {
        background: orange;
    }

    .map__hotspot span {

        top: -9px;
        left: 12px;
    }

    .s_pro {

    }

    #hochiminh_spot span {
        width: 90px
    }

    #sapa_spot span {
        top: 2px;
        left: -12px;
    }

    #hochiminh_spot {
        right: 47%;
        bottom: 21.2%;
    }

    #cantho_spot {
        right: 57%;
        bottom: 15%;
    }

    #phuquoc_spot span {
        top: 3px;
        left: -51px;
    }

    #maichau_spot span {
        top: -19px;
        left: -52px;
    }

    #hue_spot span {
        left: -28px;
    }

    .size {
        background: green;
        height: 10px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .map__hotspot span {
        font-size: 13px;
        top: -8px;
        left: 11px;
    }

    #ver {
        background: green;
    }

    #vinhlong_spot span {
        left: -64px;
        top: -9px;
    }

    .col-md-5-responsive {
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-brand img {
        height: 55px;
    }

    .col-md-7-no-padding-left {
        padding-right: 0
    }

    .size {
        background: yellow;
        height: 10px;
    }
}

@media (min-width: 200px) and (max-width: 480px) {
    .map__hotspot span {
        font-size: 11px;
        top: -9px;
        left: 8px;
    }

    #ver {
        background: blue;
    }

    .map__hotspot {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    #phanthiet_spot {
    }

    #hanoi_spot {
        right: 56%;
        bottom: 82%;
    }

    #haiphong_spot {
    }

    #bentre_spot {
    }

    #mytho_spot span {
        top: -13px;
        left: -25px;
    }

    #vinhlong_spot span {
        left: -60px;
        top: -9px;
    }

    #cantho_spot span {
        left: -25px;
        top: 5px;
    }

    #phuquoc_spot span {
        top: 0px;
        left: -44px;
    }

    #sapa_spot span {
        top: 2px;
        left: -13px;
    }

    #chaudoc_spot span {
        top: -19px;
        left: -48px;
    }

    #mytho_spot span {
        top: -18px;
        left: -25px;
    }

    #hagiang_spot span {
        top: 6px;
        left: -7px;
    }

    #hue_spot span {
        top: -9px;
        left: -28px;
    }

    #donghoi_spot span {
        top: -9px;
        left: -55px;
    }

    #hoian_spot span {
        top: -9px;
        left: -41px;
    }

    #dalat_spot span, #buonmathuot_spot span, #hochiminh_spot span {
        top: -20px;
    }

    #maichau_spot span {
        top: 1px;
        left: -40px;
    }

    #hochiminh_spot span {
        width: 75px;
    }

    #bentre_spot span {
        top: 1px;
        left: -4px;
    }

    #phuquoc_spot {
        right: 75%;
        bottom: 16%;
    }

    #kontum_spot span {
        left: -44px;
    }

    #truongsa_spot {
        bottom: 16%;
        right: 33%;
    }

    #hoangsa_spot {
        bottom: 63%;
        right: 35.5%;
    }

    .map__hotspot span {
        width: 60px;
    }

    .size {
        background: red;
        height: 10px;
    }
}

.map__inner a.active {
    font-weight: bold;
    color: #FF7300;
    background: #FF7300;
}