body {
    overflow-x:hidden;

}

#Layer_1 {
    overflow: hidden;
    display: inline;
    width: 80%;
    min-width: inherit;
    max-width: inherit;
    height: inherit;
    min-height: 500px;
    max-height: inherit;
 	overflow: hidden;
}

.fully-visible .pathdraw {
    opacity: 1;
    visibility: visible;
    fill-opacity: 0;
    z-index: 10;
    stroke: #fbb040;
    stroke-width: 2;
    stroke-dasharray: 20;
    stroke-dashoffset: -720;
    animation-name: draw;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes draw {


    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.fully-visible .website {
    visibility: visible;
    transition: visibility 2s;
}


.fully-visible .cls-18 {
    visibility: visible;
    -webkit-transition: visibility 2s;
    z-index: 8;
    position: absolute;
}

.fully-visible .cls-17 {
    visibility: visible;
    -webkit-transition: visibility 2s;
    z-index: 8;
    position: relative;
}

.fully-visible .cls-16 {
    visibility: visible;
    -webkit-transition: visibility 2s;
    z-index: 8;
    position: relative;
}

.fully-visible .cls-20 {
    visibility: visible;
    -webkit-transition: visibility 2s;
    z-index: 8;
    position: relative;
}

.fully-visible .cls-23 {
    visibility: visible;
    -webkit-transition: visibility 2s;
    z-index: 8;
    position: relative;
}

.fully-visible .c-country {
}

.c-country {
    stroke: #fbb040;
    visibility: visible;
    stroke: #fbb040;
    z-index: 5;
    fill-opacity: 0;
}

    .c-country:hover {
        cursor: pointer;
    }

.c-country-non {
    stroke: #fbb040;
    visibility: visible;
    stroke: #fbb040;
    z-index: 5;
    fill-opacity: 0;
}

.c-country.block:hover {
    cursor: pointer;
    stroke: #f44b42;
    stroke-width: 0;
    animation-name: draw-stroke;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    transition: stroke 0.5s linear;
    animation-iteration-count: infinite;
}
.c-country {

stroke-width: 4;

}

@keyframes draw-stroke {

    0% {
        stroke-width: 0;
    }

    50% {
        stroke-width: 1;
    }

    100% {
        stroke-width: 3;
    }
}

.c-dest {
    visibility: hidden;
    fill: #fbb040;
}

.fully-visible .c-dest {
    visibility: visible;
    transition: visibility 1s;
}

.fully-visible .cls-15 {
}

.Hide-c {
    visibility: hidden;
}

.website text {
    font-size: 20px;
     overflow: hidden;
}




@media (min-width:320px) and (max-width:801px) {

    .c-country {
        transform: scale(2);
        transform-origin: center;
    }



}

@media (min-width:700px) and
 (max-width:1200px)  { 
    
    .website.one-word {
        transform: translateX(50px);
       
    }
    
    
     .website.two-words {
        transform: translateX(100px);
       
    }
    .website.two-words-m {
        transform: translateX(115px);
       
    }

       .website.two-words-l {
        transform: translateX(85px);
       
    }
     .website.two-words-aj {
        transform: translateX(90px);
       
    }
     .website.three-words {
        transform: translateX(145px);
       
    }
    .website.three-words-e {
        transform: translateX(165px);
       
    }
       .website.two-words-u {
        transform: translateX(125px);
       
    }
      .website.four-words {
        transform: translateX(200px);
       
    }
    .main-words{
                transform: translateX(450px);



    }
    
    /* tablet, landscape iPad, lo-res laptops ands desktops */ }



.cls-1, .cls-2, .cls-21, .cls-3, .cls-6 {
    fill: none;
}

.cls-2, .cls-21 {
    stroke: #666;
}

.cls-2 {
    stroke-width: 3px;
}

.cls-3 {
    stroke: #fbb040;
    visibility: hidden;
}

.cls-21, .cls-3 {
    stroke-width: 1.5px;
}

.cls-4 {
    clip-path: url(#clip-path);
}

.cls-5 {
    clip-path: url(#clip-path-2);
}

.cls-6 {
    stroke: #595a5c;
    stroke-miterlimit: 10;
    stroke-width: 0.75px;
}

.cls-7 {
    fill: #4d4b4d;
}

.cls-8, .cls-9 {
    font-size: 15.83px;
}

.cls-10, .cls-8, .cls-9 {
    fill: #404042;
}

.cls-17, .cls-8 {
    font-family: DroidArabicNaskh, Droid Arabic Naskh;
    
}

.cls-9 {
    font-family: Signika-Regular, Signika;
}

.cls-11 {
    clip-path: url(#clip-path-13);
}

.cls-12 {
    fill: #666;
}

.cls-13 {
    clip-path: url(#clip-path-14);
}

.cls-14 {
    clip-path: url(#clip-path-15);
}

.cls-15 {
    fill: #fbb040;
}

.cls-16 {
    fill: #29aae1;
    visibility: hidden;
}

.cls-17 {
    font-size: 18px;
    fill: #fff;
    visibility: hidden;
}

.cls-18 {
    fill: #2bcbe0;
    visibility: hidden;
}

.cls-19 {
    font-family: AdobeArabic-Regular, Adobe Arabic;
}

.cls-20 {
    fill: #2cddb3;
    visibility: hidden;
}

.cls-22 {
    font-size: 33px;
    fill: #58595b;
    font-family: DroidArabicNaskh-Bold, Droid Arabic Naskh;
    font-weight: 700;
}