
/* .bww-description */

.bww-description { background:linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(250,250,250,1) 50%); padding: 6.5rem 0;}
.bww-description p:last-child { margin-bottom: 0;}
.bww-description .content .flex { align-items: center; margin: 0 -6.5rem;}
.bww-description .content .flex > div { width: calc(50% - (6.5rem * 2)); margin: 0 6.5rem;}
.bww-description .contact-content { max-width: 425px;}
.bww-description .contact-content h2 { margin-bottom: 1rem;}
.bww-description .contact-content h2 strong { position: relative; display: block; margin-bottom: 1rem;}
.bww-description .contact-content h2 strong:after { content: ""; position: absolute; bottom: -.5rem; left: 0; width: 35px; height: 3px; background: #efcd34;}
.bww-description .contact-content p { font-size: 1.1rem; line-height: 1.5rem;}
.bww-description .contact-content ul { margin: 2rem 0 0;}
.bww-description .contact-content li { letter-spacing: 1px; margin-top: 1rem;}
.bww-description .contact-content li a { display: block; width: 100%; color: #28628a; font-family: 'apercuregular', sans-serif;}
.bww-description .contact-content li:not(.tel) { color: #28628a; font-family: 'apercuregular', sans-serif; background: #fff; border: 2px solid #28628a; padding: .5rem;}
.bww-description .contact-content li.tel a { display: inline-block; font-family: 'apercubold', sans-serif; font-size: 3.25rem; line-height: 3.25rem; letter-spacing: -1px;}
.bww-description .contact-content li.tel a span { font-family: 'apercuregular', sans-serif; font-size: 1.5rem;}

@media(max-width: 1023px){
    .bww-description .content .flex { margin: 0 -3rem;}
    .bww-description .content .flex > div { width: calc(50% - (3rem * 2)); margin: 0 3rem;}
    .bww-description .contact-content li.tel a { font-size: 2.75rem; line-height: 2.75rem;}
}

@media(max-width: 767px){
    .bww-description { background: none; padding: 3rem 0; }
    .bww-description .content .flex { flex-wrap: wrap;}
    .bww-description .content .flex > div { width: calc(100% - (3rem * 2)); margin: 0 3rem;}
    .bww-description .content .flex > div.contact-content { margin-top: 3rem;}
}




/* .location-list */

.location-list .content h2 { margin-bottom: 2rem;}
.location-list .content > .flex { justify-content: center; align-items: stretch; flex-wrap: wrap; margin: 0 -1rem 3rem;}
.location-list .flex .box { width: calc(33.3% - (1rem * 2)); margin: 1rem; background: #fafafa; padding: 2rem;}
.location-list .flex .box h3 { position: relative; font-family: 'aperculight', sans-serif; font-size: 1.6rem; font-weight: normal; line-height: 1.8rem; text-transform: none; margin-bottom: 1.5rem;}
.location-list .flex .box h3:after { content: ""; position: absolute; bottom: -.8rem; left: 0; width: 25px; height: 3px; background: #efcd34;}
.location-list .flex .box ul { margin: 0;}
.location-list .flex .box ul .tel { font-family: 'apercubold', sans-serif;}

@media(max-width: 1100px){
    .location-list .flex .box { width: calc(50% - (1rem * 2));}
}
@media(max-width: 767px){
    .location-list .content h2 { text-align: center;}
    .location-list .flex .box { width: calc(100% - (1rem * 2)); text-align: center;}
    .location-list .flex .box h3:after { left: calc(50% - (20px / 2));}
}




/* .others */

.others { background: url(../../img/bg-mapamundi.jpg) no-repeat center 5px;}
.others h2 { margin-bottom: 1rem;}
.others ul { margin-bottom: 0;}
.others li a { display: inline-block; font-size: 1.1rem; letter-spacing: 1px; margin-top: .5rem;}
.others li a.tel { font-family: 'apercubold', sans-serif;}

@media(max-width: 767px){
    .others { background-size: 90% 90%; }
}




/* .worldmap */

.worldmap { position: relative; background: radial-gradient(circle, rgba(32,95,118,1) 35%, rgba(8,31,43,1) 100%); padding-bottom: 6.5rem;}
.worldmap:before { content: ""; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 5px; background: #fff;}
.worldmap:after { content: ""; position: absolute; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(7,24,32,1) 0%, rgba(7,24,32,0) 33%, rgba(7,24,32,0) 66%, rgba(7,24,32,1) 100%); opacity: .7;}

@media(max-width: 767px){
    .worldmap { padding-bottom: 3rem;}
}

/* .tabs */
.worldmap .tabs { position: relative; z-index: 100; justify-content: center; margin-bottom: 3rem;}

.worldmap nav button { position: relative; background: #fafafa; border: none; margin: .1rem;}
.worldmap nav button:after { content: ""; position: absolute; top: 0; left: 50%; z-index: 0; width: 0; height: 100%; background: #6cdd9f; transition: width .5s ease, left .5s ease;}
.worldmap nav button span { display: block; position: relative; z-index: 1; color: #28628a; font-family: 'apercuregular', sans-serif; font-size: 1.1rem; line-height: 1.3rem; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 1rem 1.5rem; transition: color .3s ease;}
.worldmap nav button.active:after { left: 0; width: 100%;}
.worldmap nav button.active span { color: #fff;}

@media(hover:hover){
    .worldmap nav button:hover:after { left: 0; width: 100%;}
    .worldmap nav button:hover span { color: #fff;}
}

@media(max-width: 767px){
    .worldmap .tabs { flex-wrap: wrap;}
    .worldmap .tabs button { width: 100%;}
}

/* .move-content */
.worldmap .move-content { position: relative; left: 0; width: 200%; height: auto; transition: left .5s ease;}
.worldmap .move-content.move-left  { left: -100%;}

@media(max-width: 767px){
    .worldmap .move-content:not(.move-left)  { height: 100px;}
}

.worldmap article { position: relative; width: 50%; z-index: 5;}
.worldmap article h2 { display: none;}
.worldmap article p { font-size: 1.25rem; line-height: 1.5rem; margin-bottom: 3rem;}

    /* .world-map */
.worldmap .world-map .image-content { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 800px; margin-top: -12rem;}
.worldmap .world-map .image-content img { width: 100%; max-width: 1500px; height: 100%; object-fit: cover; margin: auto;}
.worldmap .world-map .map-markers { position: absolute; width: 100%; height: 100%;}
.worldmap .world-map .map-markers .content { position: relative;}
.worldmap .world-map .map-markers a { position: absolute; z-index: 100; color: #6cdd9f;}
.worldmap .world-map .map-markers a svg { width: 25px; height: 25px;}
.worldmap .world-map .map-markers a.position-spain    { top: 115px; left: 44%;}
.worldmap .world-map .map-markers a.position-france   { top: 90px; left: 46%;}
.worldmap .world-map .map-markers a.position-italy    { top: 110px; left: 50%;}
.worldmap .world-map .map-markers a.position-uk       { top: 30px; left: 44%;}
.worldmap .world-map .map-markers a.position-belgium  { top: 55px; left: 47%;}
.worldmap .world-map .map-markers a.position-poland   { top: 50px; left: 51.5%;}
.worldmap .world-map .map-markers a.position-mexico   { top: 180px; left: 10%;}
.worldmap .world-map .map-markers a.position-colombia { top: 280px; left: 20.5%;}
.worldmap .world-map .map-markers a.position-peru     { top: 345px; left: 19.5%;}
.worldmap .world-map .map-markers a.position-eua      { top: 190px; left: 63%;}
.worldmap .world-map .map-markers a.position-switzerland { top: 83px; left: 48%;}

@media(max-width: 1500px){
    .worldmap .world-map .map-markers { width: 1500px;}
    .worldmap .world-map .image-content img { width: auto;}
}
@media(max-width: 1023px){
    .worldmap .world-map .image-content img { max-width: 1100px;}
    .worldmap .world-map .map-markers { width: 1100px;}
    .worldmap .world-map .map-markers a.position-spain       { top: 130px; left: 42.5%;}
    .worldmap .world-map .map-markers a.position-france      { top: 100px; left: 45%;}
    .worldmap .world-map .map-markers a.position-uk          { top: 50px; left: 43%;}
    .worldmap .world-map .map-markers a.position-belgium     { top: 60px; left: 47%;}
    .worldmap .world-map .map-markers a.position-poland      { top: 55px; left: 52%;}
    .worldmap .world-map .map-markers a.position-mexico      { top: 200px; left: 1%;}
    .worldmap .world-map .map-markers a.position-colombia    { top: 285px; left: 13%;}
    .worldmap .world-map .map-markers a.position-peru        { top: 355px; left: 12%;}
    .worldmap .world-map .map-markers a.position-eua         { top: 200px; left: 66.5%;}
    .worldmap .world-map .map-markers a.position-switzerland { top: 85px; left: 48.5%;}
}
@media(max-width: 767px){
    .worldmap .world-map .image-content ,
    .worldmap .world-map .map-markers { display: none;}
}


    /* .continents-map */

        /* .continents-list */
.worldmap .continents-map .continents-list .flex { justify-content: center; flex-wrap: wrap;}
.worldmap .continents-map .continents-list button { overflow: hidden; background: #fafafa;}
.worldmap .continents-map .continents-list button span { font-size: .85rem; letter-spacing: 2px; line-height: .85rem; text-transform: uppercase; padding: .5rem .8rem;}

        /* .continents-content */
.worldmap .continents-map .continents-content { display: none; width: 100% !important;}
.worldmap .continents-map .continents-content.europe { display: block;}

            /* .buttons */
.worldmap .continents-map .continents-content .flex { justify-content: center; flex-wrap: wrap; padding: 0 4rem;}
.worldmap .continents-map .continents-content button { position: relative; color: #fff; letter-spacing: 1px; background: transparent; padding: .5rem 1rem; margin: 0 .2rem;}
.worldmap .continents-map .continents-content button:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: #fff; transition: width .5s ease , left .5s ease ;}
.worldmap .continents-map .continents-content button.active:after { left: 0; width: 100%;}

@media(hover:hover){
    .worldmap .continents-map .continents-content button:hover:after { left: 0; width: 100%;}
}

@media(max-width: 767px){
    .worldmap .continents-map .continents-content .flex { padding: 0;}
    .worldmap .continents-map .continents-content li { width: 100%; text-align: center;}
    .worldmap .continents-map .continents-content button { pointer-events: none; margin: auto;}
    .worldmap .continents-map .continents-content button.active:after { display: none;}
}

            /* images */
.worldmap .continents-map .continents-content .image-content { position: relative; max-width: 860px; margin: auto;}
.worldmap .continents-map .continents-content .image-content img { width: 100%;}
.worldmap .continents-map .continents-content .image-content img.country { position: absolute; top: 0; left: 0;}


@media(max-width: 767px){
    .worldmap .continents-map .continents-content .image-content { display: none;}  
}



