@font-face {
    font-family: "Isento-Bold";
    src: url("/sites/all/themes/narabnews/battleforthenile/fonts/Isento-Bold2.woff") format('woff');
}

@font-face {
    font-family: "Isento-Medium";
    src: url("/sites/all/themes/narabnews/battleforthenile/fonts/Isento-Medium2.woff2") format('woff2');
}


@font-face {
    font-family: "Isento-ExtraBold";
    src: url("/sites/all/themes/narabnews/battleforthenile/fonts/Isento-ExtraBold2.woff2") format('woff2');
}

html {
  background: url(/sites/all/themes/narabnews/battleforthenile/images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.gerdGameContainer svg text { font-family:"Isento-Medium"}
.gerdGameContainer .clearFloat { display:block; width:1px; height:1px; overflow:hidden; clear:both;}



.gerdGameContainer p { padding:0; margin:0; font-size:14px; }
.gerdGameContainer { font-family:"Isento-Medium"; position:relative; width:480px; margin:0 auto; overflow:hidden; }
.gerdGameContainer .mapContainer { position:relative; width:100%; border:1px solid #ccc; background-color:#e6e6e6; }



.gerdGameContainer .controls { position:absolute; right:0; bottom:0; width:70px;  }
.gerdGameContainer .controls::before {content: ""; position:absolute; right:0; bottom:0; width:100%; height:250px; background-color:#000; opacity:0.5; z-index:0; }




.gerdGameContainer .controls .range-slider { width:100%; padding:0; margin:0;}


.gerdGameContainer .sources { display:block; width:100%; padding:4px 4px; font-size:10px; color:#fff; position:relative; z-index:99; background-color:#000; opacity:0.7; text-decoration:none; }

.gerdGameContainer .popupBox { display:none; margin:0 auto; position:absolute; bottom:0; width:100%; background-color:#fff; z-index:99; opacity:0.9;  }
.gerdGameContainer .popupBox a.close { display:block; width:20px; height:20px; padding:0; margin:4px 4px 0 0; float:right; text-decoration:none; font-weight:bold; color:#fff; background-color:red; text-align:center; vertical-align:middle;  }
.gerdGameContainer .popupBox p { margin:10px 10px; padding:0;}

  /*.gerdGameContainer .controls .range-slider .input-range {
  position:relative;
	 -webkit-appearance: none;
	 height: 200px;
	 border-radius: 5px;
	 background: #000;
	 outline: none;
	 writing-mode: bt-lr;
	 -webkit-appearance: slider-vertical;
     right: 12%;
	 z-index:3;
}*/

input[type="range"] {
    position:relative;
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  height: 200px;
  border-radius: 5px;
  outline: 0;
  writing-mode: bt-lr;
   -webkit-appearance: slider-vertical;
  right: 12%;
  z-index:3;
}

/* FIREFOX FIX */
@-moz-document url-prefix() {
  input[type="range"] {
     right: -70%;
  }
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e74c3c;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  transition: .3s ease-in-out;
}​
  input[type="range"]::-webkit-slider-thumb:hover {
    background-color: white;
    border: 2px solid #e74c3c;
  }
  input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
  }

.gerdGameContainer .controls .nums {
    position:absolute;
    width:100%;
    bottom:0;
    z-index:2;
}
.gerdGameContainer .controls .nums div { width:100%; }
.gerdGameContainer .controls .nums div.yrslabel { padding:0;  margin:4px; }
.gerdGameContainer .controls .nums div.yrslabel span{ color:#fff; font-size:12px; font-weight:bold;}
.gerdGameContainer .controls .nums div.yrs { display:block; width:100%; padding:0; margin:0; border-top:1px solid #fff;  }
.gerdGameContainer .controls .nums div.yrs:last-child { border-top:none; }

.gerdGameContainer .controls .nums div.yrs span {  display:block; width:90%; padding:10px 0; margin:0; font-size:30px; font-weight:bold; text-align:center; vertical-align:middle;  color:#fff;  }
.gerdGameContainer .controls .nums div.yrs.c1.active, .gerdGameContainer .controls .nums div.yrs.c1 span { background-color:#E41E25; }
.gerdGameContainer .controls .nums div.yrs.c2.active, .gerdGameContainer .controls .nums div.yrs.c2 span { background-color:#F15D24; }
.gerdGameContainer .controls .nums div.yrs.c3.active, .gerdGameContainer .controls .nums div.yrs.c3 span { background-color:#EDDC43; }
.gerdGameContainer .controls .nums div.yrs.active { filter: saturate(100%);}




.gerdGameContainer .gerdInfo { display:none; position:absolute; right:-12%; top:0; width:60%; min-height:30vh; color:#fff;  }
.gerdGameContainer .gerdInfo p { color:#fff; line-height:14px; }
.gerdGameContainer .gerdInfo .infoLine1 { position:relative; display:block; margin:0 auto; padding:20px 20px; background-color:#E41E25; width:120px; height:120px; border-radius:50%; text-align:center; position:absolute; top:0; left: 50%; transform: translate(-50%, 0); z-index:10; }

.gerdGameContainer .gerdInfo .infoLine1 p {
  margin: 0;
  padding:0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

    display: block;
    width: 77%;
    text-align: center;
    vertical-align:middle;
    margin: auto auto;
    color:#fff;
    font-size:14px;
    font-weight:bolder;
    font-family:"Isento-Bold";


    }


 .gerdGameContainer .gerdInfo .infoLine1 p strong {  font-family:"Isento-ExtraBold"; font-size:30px; }

.gerdGameContainer .gerdInfo .colorChange3 p, .gerdGameContainer .gerdInfo .otherInfo .colorChange3 p, .gerdGameContainer .gerdInfoPopup.colorChange3 p { color:#000; line-height:14px; }



 .gerdGameContainer .gerdInfo .otherInfo { position:relative;  width:50%; margin:120px auto 0 auto; z-index:1;}



  .gerdGameContainer .gerdInfo .otherInfo .gg-arrow-long-left {
    box-sizing: border-box;
    position: absolute;
    display: block;
    transform: scale(var(--ggs,1));
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    box-shadow: inset 0 0 0 2px;
    width: 70px;
    height: 5.5px;
    top:-2px;
    color:#E41E25;
    left: -76px;
}




.gerdGameContainer .gerdInfo .otherInfo .gg-arrow-long-left::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #E41E25;
    border-left: 2px solid #E41E25;
    transform: rotate(45deg);
    left: 0;
    bottom: -2px
}

  .gerdGameContainer .gerdInfo .otherInfo::before {
          content: "";
          position: absolute;
          top: 0px;
          left: -8px;
          bottom: -8px;
          border-left:2px solid #E41E25;
          border-bottom:2px solid #E41E25;
          width:115%;

  }

  /*.gerdGameContainer .gerdInfo .otherInfo::after {
        content: "\27F5";
        font-family:"Arial";
        font-weight:100;
        position: absolute;
        top: 0px;
        left: -35px;
        top: -18px;
        width: 100px;
        height: 2px;
        font-size: 30px;
        color: #E41E25;
  }*/

 .gerdGameContainer .gerdInfo .infoLine2 {
        width:100%;
        position: relative;
        display:block;
        padding:50px 0 4px 0;
        text-align: center;
    }

   .gerdGameContainer .gerdInfo .infoLine2::before {
          content: "";
          background-color:#E41E25;
          background-size: cover;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          opacity: 0.75;
          border-bottom-left-radius: 20%;
          border-bottom-right-radius: 20%;
          z-index:0;
    }

 .gerdGameContainer .gerdInfo p strong {  font-size:30px; letter-spacing: -0.09em; }
 .gerdGameContainer .gerdInfo .infoLine2 p { position:relative; z-index:1; color:#fff; margin-bottom:10px; }
 .gerdGameContainer .gerdInfo .infoLine2 p span.spacerln { display:block; width:100%; height:4px; }

 .gerdGameContainer .gerdInfo .infoLine3 {
        width:100%;
        position: relative;
        display:block;
        padding:10px 0 4px 0;
        text-align: center;
    }

   .gerdGameContainer .gerdInfo .infoLine3::before {
          content: "";
          background-color:#E41E25;
          background-size: cover;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          opacity: 0.75;
          border-bottom-left-radius: 20%;
          border-bottom-right-radius: 20%;
          z-index:0;
    }

.gerdGameContainer .gerdInfo .infoLine3 img { width:30%; position:relative; float:left; z-index:1; margin:-8px -20px 0 4px;}
.gerdGameContainer .gerdInfo .infoLine3 p strong {  font-size:30px; }
.gerdGameContainer .gerdInfo .infoLine3 p { position:relative; z-index:2; color:#fff; margin-bottom:10px; }


 .gerdGameContainer .gerdInfo .infoLine4 {
        width:100%;
        position: relative;
        display:block;
        padding:10px 0 4px 0;
        text-align: center;
    }
.gerdGameContainer .gerdInfo .infoLine4 img { width:30%; position:relative; float:left; z-index:1; /*margin:-8px -20px 0 4px;*/ }
 .gerdGameContainer .gerdInfo .infoLine4 p strong { font-size:30px; }
 .gerdGameContainer .gerdInfo .infoLine4 p { position:relative; z-index:2; color:#fff; margin-bottom:10px; }
  .gerdGameContainer .gerdInfo .infoLine4::before {
          content: "";
          background-color:#E41E25;
          background-size: cover;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          opacity: 0.75;
          border-bottom-left-radius: 20%;
          border-bottom-right-radius: 20%;
          z-index:0;
    }


.gerdGameContainer .gerdInfo .colorChange0::before  { background-color:#faf9f8; /*filter:saturate(200%)*/ }
.gerdGameContainer .gerdInfo .colorChange1::before  { background-color:#8b98a84; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfo .colorChange2::before  { background-color:#F15D24; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfo .colorChange3::before  { background-color:#EDDC43; /*filter:saturate(200%)*/}

.gerdGameContainer .gerdInfo .infoLine1.colorChange0  { background-color:#faf9f8; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfo .infoLine1.colorChange2  { background-color:#F15D24; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfo .infoLine1.colorChange1  { background-color:#8b98a84; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfo .infoLine1.colorChange3  { background-color:#EDDC43; /*filter:saturate(200%)*/}



.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder0::before { border-left:2px solid #faf9f8; border-bottom:2px solid #faf9f8;}
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder1::before { border-left:2px solid #8b98a84; border-bottom:2px solid #8b98a84;}
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder2::before { border-left:2px solid #F15D24; border-bottom:2px solid #F15D24;}
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder3::before { border-left:2px solid #EDDC43; border-bottom:2px solid #EDDC43;}


.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder0::after { color:#faf9f8;}
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder1::after { color:#8b98a84;}
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder2::after { color:#F15D24;}
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder3::after { color:#EDDC43;}

.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder0 .gg-arrow-long-left::after { border-bottom: 2px solid #faf9f8; border-left: 2px solid #faf9f8; }
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder1 .gg-arrow-long-left::after { border-bottom: 2px solid #8b98a84; border-left: 2px solid #8b98a84; }
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder2 .gg-arrow-long-left::after { border-bottom: 2px solid #F15D24; border-left: 2px solid #F15D24; }
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder3 .gg-arrow-long-left::after { border-bottom: 2px solid #EDDC43; border-left: 2px solid #EDDC43; }

.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder0 .gg-arrow-long-left { color:#faf9f8 }
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder1 .gg-arrow-long-left { color:#8b98a84 }
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder2 .gg-arrow-long-left { color:#F15D24 }
.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder3 .gg-arrow-long-left { color:#EDDC43;  }

.gerdGameContainer .gerdInfo .otherInfo.colorChangeBorder .gg-arrow-long-left  { filter:brightness(0.8); }
.gerdGameContainer .gerdInfo .otherInfo::before { filter:brightness(0.8); }

.gerdGameContainer .gerdInfoPopup { display:none; position:absolute; top: 0; left:0; width:35%; text-align:center; padding:10px 10px;  }
.gerdGameContainer .gerdInfoPopup:before {
          content: "";
          background-color:#E41E25;
          background-size: cover;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          opacity: 0.75;
          z-index:0;
          border-radius: 5%;
          border:1px solid #fff;

    }

.gerdGameContainer .gerdInfoPopup:after {
    content: "";
    position:absolute;
    right:0px;
    top:40%;
    right:-14px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 15px solid #E41E25;
    border-bottom: 10px solid transparent;
    opacity: 0.75;
}

.gerdGameContainer .gerdInfoPopup p { position:relative; color:#fff; font-family:"Isento-Medium"; font-size:14px; line-height:14px; z-index:2; font-weight:bolder;  }
.gerdGameContainer .gerdInfoPopup p strong {font-family:"Isento-ExtraBold"; font-size:30px; letter-spacing: -0.09em;}

.gerdGameContainer .gerdInfoPopup.egypt {
    display:block;
    top:32%;
    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}



.gerdGameContainer .gerdInfoPopup.colorChange0:before { background-color:#faf9f8; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfoPopup.colorChange1:before { background-color:#8b98a84; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfoPopup.colorChange2:before { background-color:#F15D24; /*filter:saturate(200%)*/}
.gerdGameContainer .gerdInfoPopup.colorChange3:before { background-color:#EDDC43; border:1px solid #fff /*filter:saturate(200%)*/}

.gerdGameContainer .gerdInfoPopup.colorChange0:after { border-left: 15px solid #faf9f8; }
.gerdGameContainer .gerdInfoPopup.colorChange1:after { border-left: 15px solid #8b98a84; }
.gerdGameContainer .gerdInfoPopup.colorChange2:after { border-left: 15px solid #F15D24; }
.gerdGameContainer .gerdInfoPopup.colorChange3:after { border-left: 15px solid #EDDC43; }





.gerdGameContainer .headlinetext {  display:none; width:100%; padding:2px 10px; position:absolute; top:0; left:0; background-color:#fff; opacity:0.7;}
.gerdGameContainer .headlinetext p { font-family:'Isento-Bold'; font-size:20px; font-weight:bolder; letter-spacing:-0.06em}


.gerdGameContainer .bottomtext { display:block; width:100%; padding:2px 10px; position:absolute; bottom:0; left:0; background-color:#fff; opacity:0.7;  }
.gerdGameContainer .bottomtext p { float:left; width:80%; font-family:'Isento-Bold'; font-size:16px; letter-spacing:-0.06em; margin: 0; line-height: 14px; }

/*
.gerdGameContainer .bottomtext .social-icons { text-align:right; width:20%; float:left; }
.gerdGameContainer .bottomtext .social-icons a { position:relative; font-size:20px; filter:contrast(2); color:#000;}
.gerdGameContainer .bottomtext .social-icons  ul { display:none; position:absolute; left:0; height:30px; top:-45px; width:80%; padding:2px 20% 0 0; list-style:none; background-color:#fff; }
.gerdGameContainer .bottomtext .social-icons ul li { float:right;  }
.gerdGameContainer .bottomtext .social-icons ul li a { display:block; width:40px; height:30px; font-size:25px; }
.gerdGameContainer .bottomtext .social-icons ul li.icon-fb a { color:#0303b5;}
.gerdGameContainer .bottomtext .social-icons ul li.icon-twitter a { color:#0583d0; }
.gerdGameContainer .bottomtext .social-icons ul li.icon-linkedin a { color:#2867B2;}
.gerdGameContainer .bottomtext .social-icons ul li.icon-whatsapp a { color:#0a983f; }
.gerdGameContainer .bottomtext .social-icons ul li.icon-email a { color:#000; }
.gerdGameContainer .bottomtext .social-icons a.colorChange1 { color:#E41E25;)}
.gerdGameContainer .bottomtext .social-icons a.colorChange2 { color:#F15D24;}
.gerdGameContainer .bottomtext .social-icons a.colorChange3 { color:#908204;}
*/

.gerdGameContainer .social-icons { text-align:right; width:auto; position:absolute; left:0; bottom:6%;  }
.gerdGameContainer .social-icons a { position:relative; font-size:30px; filter:contrast(2); color:#000;}
.gerdGameContainer .social-icons a.mainIcon { display:block; width:30px; height:40px; padding: 0 0 0 4px; color:#E41E25;}

.gerdGameContainer .social-icons  ul { display:none; position:absolute; width:100vw; left:45px; padding: 0; margin: 0; list-style:none; top: 35px;  }
.gerdGameContainer .social-icons ul li {  }
.gerdGameContainer .social-icons ul li a { float:left; display:block; height:40px; font-size:35px; padding:2px 6px; background-color:#fff; }
.gerdGameContainer .social-icons ul li.icon-fb a { color:#0303b5;}
.gerdGameContainer .social-icons ul li.icon-twitter a { color:#0583d0; }
.gerdGameContainer .social-icons ul li.icon-linkedin a { color:#2867B2;}
.gerdGameContainer .social-icons ul li.icon-whatsapp a { color:#0a983f; }
.gerdGameContainer .social-icons ul li.icon-email a { color:#656363; }
.gerdGameContainer .social-icons a.colorChange1 { color:#E41E25;)}
.gerdGameContainer .social-icons a.colorChange2 { color:#F15D24;}
.gerdGameContainer .social-icons a.colorChange3 { color:#908204;}


.gerdGameContainer .pointerIcon { position:absolute; bottom:250px; right:0; width:70px; height:auto;   animation: MoveUpDown 2s linear infinite; }


path#south-sudan { stroke-width: 8!important; stroke: #e6e6e6;}
path#eritrea {stroke: #f7ebdb; stroke-width: 8!important; }
path#path4907 { stroke: #b4d0ee; stroke-width: 3!important; }
/*path#sudan { fill: #ada8a2!important; stroke:#ada8a2; }
path#ethiopia { stroke:#d4cabc; stroke-width: 8!important; }*/

/* ANIMATYION*/

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 250;
  }
  50% {
    bottom: 260px;
  }
}


@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

/* ANIMATION */

@media only screen and (max-width: 500px) {


.gerdGameContainer { width:100%;}
.gerdGameContainer .gerdInfo { width:60%; right: -12%; }


/*.gerdGameContainer .gerdInfo .otherInfo  { width:58%; }*/
.gerdGameContainer .gerdInfo p strong,
/*.gerdGameContainer .gerdInfo .colorChange { padding-bottom:4px;}*/
.gerdGameContainer .gerdInfo .infoLine1 p strong,
.gerdGameContainer .gerdInfo .infoLine2 p strong,
.gerdGameContainer .gerdInfo .infoLine3 p strong,
.gerdGameContainer .gerdInfo .infoLine4 p strong,
.gerdGameContainer .gerdInfoPopup p strong
                            { font-size:20px;}
.gerdGameContainer .gerdInfo .infoLine1 { width:80px; height:80px}

.gerdGameContainer .gerdInfo .otherInfo { margin-top:92px;}

.gerdGameContainer .gerdInfo p { font-size:10px; line-height:9px; }
.gerdGameContainer .gerdInfo .infoLine1 p,
.gerdGameContainer .gerdInfo .infoLine2 p,
.gerdGameContainer .gerdInfo .infoLine3 p,
.gerdGameContainer .gerdInfo .infoLine4 p,
.gerdGameContainer .gerdInfoPopup p
                        { font-size:12px; line-height:12px; margin:0 2px 4px 2px; }


.gerdGameContainer .gerdInfo .infoLine1 p { width:70%; }
.gerdGameContainer .gerdInfo .infoLine4 p {  width: 85%; }
.gerdGameContainer .gerdInfo .infoLine3 img { margin:0; }



.gerdGameContainer .gerdInfo .infoLine2 { padding-top:35px;}
.gerdGameContainer .bottomtext p { font-size:14px; margin: 0; }

.gerdGameContainer .social-icons { bottom:8%;  }

}

@media only screen and (max-width: 280px) {

 }