/*global classes
======================================================================================================*/
* {-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;}
html, body { font-size:14px; background: #fff; color:#6b6b6b; font-family: 'apex_newbook', sans-serif; min-width: 980px;  }
body {background: url(../images/goal-1-grayImg.svg) no-repeat center center; background-size: 0 0; transition: all 1s ease-in-out;}
body.text1 {background: url(../images/goal-1-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text2 {background: url(../images/goal-2-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text3 {background: url(../images/goal-3-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text4 {background: url(../images/goal-4-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text5 {background: url(../images/goal-5-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text6 {background: url(../images/goal-6-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text7 {background: url(../images/goal-7-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text8 {background: url(../images/goal-8-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text9 {background: url(../images/goal-9-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text10 {background: url(../images/goal-10-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text11 {background: url(../images/goal-11-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text12 {background: url(../images/goal-12-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text13 {background: url(../images/goal-13-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text14 {background: url(../images/goal-14-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text15 {background: url(../images/goal-15-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text16 {background: url(../images/goal-16-grayImg.svg) no-repeat center center; background-size:100% 100%;}
body.text17 {background: url(../images/goal-17-grayImg.svg) no-repeat center center; background-size:100% 100%;}

ul, li { list-style: none;}
a,{ outline: none;}
a, img { outline:none; border:none; color:inherit;}
a { text-decoration: none;}
a:hover { text-decoration: none;}
.clear { clear: both;}
img{max-width: 100%;}

/* Main Container
======================================================================================================*/

.conatiner{ width:1100px; margin:0px auto 0; position: relative;}
.conatiner.mainContainer{ margin-top:-50px; transition: all 0.5s ease-in-out;}
.conatiner.mainContainer.spiderMode{ margin-top:50px;}
.conatiner-fluid{ width:100%; margin: 0 auto; position: relative; min-height: 100%}
.mainHeader{position: absolute; top: 0; width: 100%;}
.mainHeader .logo{margin:10px;}
.mainHeader .reset{ position: absolute; right:10px; top:10px; display:none; }
.mainHeader .reset a{ padding: 15px 30px; border:2px solid #de4343; color:#2a2a2a; font-family: 'apex_newbold';font-size: 16px; display: inline-block; transition:all 0.5s ease-in-out; }
.mainHeader .reset a:hover{ background: #de4343; color: #fff; }
.mainHeader .reset.resetActive{display: block}


.slices > a.hideCont{opacity:0.1; pointer-events: none;}

svg {width: 100%; height: 840px; position: relative; z-index: 1}
path.slice{	stroke-width:1px; stroke: #fff;}
path.sliceBlack{ stroke-width:1px; stroke: transparent; pointer-events: none;}
polyline{ opacity:1;  stroke: black;  stroke-width:1px; fill: none; }
.leaderLine { stroke-dasharray: 1000;  stroke-dashoffset: 1000;  animation: dash 3s linear backwards; display: none; }
.leaderLine.show{ stroke-dasharray: 1000;  stroke-dashoffset: 1000;  animation: dash 3s linear forwards; display: block; }

/*Animation*/
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/*Slice Content Position*/

.sdg-Content{position: absolute; top: 0; pointer-events: none; z-index: 2;}
.sdg-Content .goalNum{ font-size: 36px; font-family: 'apex_newbold';color: #fff; transition: all 0.5s ease-in-out }
.sdg-Content .goalTxt{ font-size: 12px; font-family: 'apex_newbold';color: #fff; }
.sdg-Content.smallCirc .goalNum{ font-size: 34px; font-family: 'apex_newbold';color: #fff; }



.sdg-Content .ContGoal1{ position: absolute; top: 85px; left: 570px; text-align: center;}
.sdg-Content .ContGoal1 .goalImg{ width: 48px; position: absolute; top: 157px; transform: rotate(12deg); left: -16px;}
.sdg-Content .ContGoal1 .goalTxt{ text-transform:uppercase; width: 50px; position: absolute; top: 54px; transform: rotate(0deg); left:0px;  }
.sdg-Content .ContGoal1 .goalNum{ width: 50px; position: absolute; top: 13px; transform: rotate(0deg); left: 0px; }

.sdg-Content .ContGoal2{position:absolute; top:115px;left:675px; text-align:center;} 
.sdg-Content .ContGoal2 .goalImg{ width: 42px; position:absolute; top:140px; transform: rotate(31deg); left: -65px; }
.sdg-Content .ContGoal2 .goalTxt{ text-transform:uppercase; width: 50px; position: absolute; top: 57px; transform: rotate(0deg); left: -14px;  }
.sdg-Content .ContGoal2 .goalNum{ width: 50px; position: absolute; top: 15px;  transform: rotate(0deg);left: -5px; }

.sdg-Content .ContGoal3{position:absolute; top:170px;left:748px; text-align:center;}
.sdg-Content .ContGoal3 .goalImg{ width: 42px; position:absolute; top:130px; transform: rotate(55deg); left: -99px; }
.sdg-Content .ContGoal3 .goalTxt{ text-transform:uppercase; width: 70px; position: absolute; top: 61px; transform: rotate(0deg); left: -39px;  }
.sdg-Content .ContGoal3 .goalNum{ width: 50px; position: absolute; top: 36px; transform: rotate(-5deg);left: 9px; }

.sdg-Content .ContGoal4{position:absolute; top:290px;left:790px; text-align:center;}
.sdg-Content .ContGoal4 .goalImg{ width: 38px; position:absolute; top:57px; transform: rotate(80deg); left: -115px; }
.sdg-Content .ContGoal4 .goalTxt{ text-transform:uppercase; width: 70px; position: absolute; top: 34px; transform: rotate(0deg); left: -37px;  }
.sdg-Content .ContGoal4 .goalNum{ width: 50px; position: absolute; top: 13px; transform: rotate(0deg);left: 18px; }

.sdg-Content .ContGoal5{position:absolute; top:390px;left:810px; text-align:center;}
.sdg-Content .ContGoal5 .goalImg{ width: 36px; position:absolute; top:5px; transform: rotate(5deg); left: -125px; }
.sdg-Content .ContGoal5 .goalTxt{ text-transform:uppercase; width: 70px; position: absolute; top: 30px; transform: rotate(0deg); left: -43px;  }
.sdg-Content .ContGoal5 .goalNum{ width: 50px; position: absolute; top: 17px; transform: rotate(0deg); left: 11px; }

.sdg-Content .ContGoal6{position:absolute; top:482px;left:770px; text-align:center;}
.sdg-Content .ContGoal6 .goalImg{ width: 34px; position:absolute; top:-30px; transform: rotate(30deg); left: -103px; }
.sdg-Content .ContGoal6 .goalTxt{ text-transform:uppercase; width: 90px; position: absolute; top: 25px; transform: rotate(0deg); left: -27px;  }
.sdg-Content .ContGoal6 .goalNum{ width: 50px; position: absolute; top: 49px; transform: rotate(0deg); ;left: 9px; }

.sdg-Content .ContGoal7{position:absolute; top:565px;left:711px; text-align:center;}
.sdg-Content .ContGoal7 .goalImg{ width: 42px; position:absolute; top:-67px; transform: rotate(30deg); left: -78px; }
.sdg-Content .ContGoal7 .goalTxt{ text-transform:uppercase; width: 90px; position: absolute; top: 24px; transform: rotate(0deg); left: -27px;  }
.sdg-Content .ContGoal7 .goalNum{ width: 50px; position: absolute; top: 46px;  transform: rotate(0deg);left: 0px; }

.sdg-Content .ContGoal8{position:absolute; top:600px;left:620px; text-align:center;}
.sdg-Content .ContGoal8 .goalImg{width: 40px; position: absolute; top: -73px; transform: rotate(-24deg); left: -36px;}
.sdg-Content .ContGoal8 .goalTxt{ text-transform:uppercase; width: 90px; position: absolute; top: 19px; transform: rotate(0deg); left: -25px;  }
.sdg-Content .ContGoal8 .goalNum{ width: 50px; position: absolute; top: 58px;  transform: rotate(0deg);left: 4px; }

.sdg-Content .ContGoal9{position:absolute; top:630px;left:515px; text-align:center;}
.sdg-Content .ContGoal9 .goalImg{ width: 42px; position:absolute; top:-92px; transform: rotate(-3deg); left:13px; }
.sdg-Content .ContGoal9 .goalTxt{ text-transform:uppercase; width: 90px; position: absolute; top: 6px; transform: rotate(0deg); left: -12px;  }
.sdg-Content .ContGoal9 .goalNum{ width: 50px; position: absolute; top: 41px;  transform: rotate(0deg);left: 10px; }

.sdg-Content .ContGoal10{position:absolute; top:620px;left:415px; text-align:center;}
.sdg-Content .ContGoal10 .goalImg{ width: 42px; position:absolute; top:-95px; transform: rotate(3deg); left: 56px; }
.sdg-Content .ContGoal10 .goalTxt{ text-transform:uppercase; width: 90px; position: absolute; top: 11px; transform: rotate(0deg); left: -4px;  }
.sdg-Content .ContGoal10 .goalNum{ width: 50px; position: absolute; top: 34px;  transform: rotate(0deg);left: 2px; }

.sdg-Content .ContGoal11{position:absolute; top:555px;left:330px; text-align:center;}
.sdg-Content .ContGoal11 .goalImg{ width: 42px; position:absolute; top:-60px; transform: rotate(40deg); left: 98px; }
.sdg-Content .ContGoal11 .goalTxt{ text-transform:uppercase; width: 110px; position: absolute; top: 23px; transform: rotate(0deg); left: -7px;  }
.sdg-Content .ContGoal11 .goalNum{ width: 50px; position: absolute; top: 48px;  transform: rotate(0deg);left: 7px; }

.sdg-Content .ContGoal12{position:absolute; top:475px;left:262px; text-align:center;}
.sdg-Content .ContGoal12 .goalImg{ width: 42px; position:absolute; top:-23px; transform: rotate(63deg); left: 131px; }
.sdg-Content .ContGoal12 .goalTxt{ text-transform: uppercase; width: 150px; position: absolute; top: 15px; transform: rotate(0deg); left: -19px;}
.sdg-Content .ContGoal12 .goalNum{ width: 50px; position: absolute; top: 55px;  transform: rotate(0deg);left: 20px; }

.sdg-Content .ContGoal13{position:absolute; top:390px;left:250px; text-align:center;}
.sdg-Content .ContGoal13 .goalImg{ width: 42px; position:absolute; top:8px; transform: rotate(5deg); left: 129px; }
.sdg-Content .ContGoal13 .goalTxt{ text-transform:uppercase; width: 80px; position: absolute; top: 27px; transform: rotate(0deg); left: 23px;  }
.sdg-Content .ContGoal13 .goalNum{ width: 50px; position: absolute; top: 22px;  transform: rotate(0deg);left: -9px; }

.sdg-Content .ContGoal14{position:absolute; top:280px;left:260px; text-align:center;}
.sdg-Content .ContGoal14 .goalImg{ width: 42px; position:absolute; top:59px; transform: rotate(20deg); left: 123px; }
.sdg-Content .ContGoal14 .goalTxt{ text-transform:uppercase; width: 80px; position: absolute; top: 45px; transform: rotate(2deg); left: 29px;  }
.sdg-Content .ContGoal14 .goalNum{ width: 50px; position: absolute; top: 27px;  transform: rotate(2deg);left: -11px; }

.sdg-Content .ContGoal15{position:absolute; top:180px;left:305px; text-align:center;}
.sdg-Content .ContGoal15 .goalImg{ width: 42px; position:absolute; top:111px; transform: rotate(33deg); left: 103px; }
.sdg-Content .ContGoal15 .goalTxt{ text-transform:uppercase; width: 50px; position: absolute; top: 72px; transform: rotate(0deg); left: 34px;  }
.sdg-Content .ContGoal15 .goalNum{ width: 50px; position: absolute; top: 28px;  transform: rotate(0deg);left: 0px; }

.sdg-Content .ContGoal16{position:absolute; top:116px;left:380px; text-align:center;}
.sdg-Content .ContGoal16 .goalImg{ width: 42px; position:absolute; top:140px; transform: rotate(-30deg); left: 67px; }
.sdg-Content .ContGoal16 .goalTxt{ text-transform:uppercase; width: 50px; position: absolute; top: 74px; transform: rotate(0deg); left: 20px;  }
.sdg-Content .ContGoal16 .goalNum{ width: 50px; position: absolute; top: 28px;  transform: rotate(0deg);left: 0px; }

.sdg-Content .ContGoal17{position:absolute; top:80px;left:465px; text-align:center;}
.sdg-Content .ContGoal17 .goalImg{ width: 42px; position:absolute; top:155px; transform: rotate(-12deg); left: 34px; }
.sdg-Content .ContGoal17 .goalTxt{ text-transform:uppercase; position: absolute; top: 76px; transform: rotate(0deg); left: 4px;  }
.sdg-Content .ContGoal17 .goalNum{ width: 50px; position: absolute; top: 26px;  transform: rotate(0deg);left: 9px; }






/*Scaling*/
.scaleTransfrom{transform: scale(1, 1); transition: 0.5s ease-in-out;}
.slices a.sliceActive .scaleTransfrom{transform: scale(1.04, 1.04);}
.slices a.sliceSmall .scaleTransfrom{transform: scale(0.95, 0.95);}

.slices2 .darkSlice{transform: scale(1, 1); transition: 0.5s ease-in-out;}
.slices2 .darkSlice.dSliceTrans{transform: scale(0.95, 0.95);}
.slices2 .darkSlice.hideCont{transform: scale(1.04, 1.04);}



.sdg-Content > div {opacity: 1; visibility: visible;  transition: all 0.5s ease-in-out;}
.sdg-Content > div.hideCont{ visibility: hidden; opacity: 0;}

.lines .leaderLine.hideCont{display: none;}





/*SDG Liknking Text*/
.sdgTextBlocks{ position: absolute; bottom: 0; height: 100%; opacity: 0; transition: all 1.5s ease-in-out; visibility:hidden; /*pointer-events: none;*/  }
.sdgTextBlocks.show{visibility: visible; opacity: 1; }
.sdgTextBlocks > div{visibility: visible; opacity: 1; transition: all 1.5s ease-in-out; }
.sdgTextBlocks > div.hideCont{visibility: hidden; opacity: 0;}

.sdgTextBlocks > div.change {color: rgba(0,0,0,0);text-shadow: 0 0 20px #ededed;}
.sdgTextBlocks > div{position: absolute; width: 300px; padding:5px 0; font-size: 13px; line-height: 16px; -webkit-transition: all 2s ease; transition: all 2s ease; z-index: 9;}
.sdgTextBlocks .sdg1Text{ bottom: 814px; left: 645px; width: 430px; }
.sdgTextBlocks .sdg2Text{ bottom: 725px; left: 740px; width: 380px; }
.sdgTextBlocks .sdg3Text{ bottom: 645px; left: 834px;}
.sdgTextBlocks .sdg4Text{ bottom: 555px; left: 888px; width: 217px;}
.sdgTextBlocks .sdg5Text{ bottom: 430px; left: 899px; width: 196px;}
.sdgTextBlocks .sdg6Text{ bottom: 255px; left: 870px; width: 290px; }
.sdgTextBlocks .sdg7Text{ bottom: 154px; left: 813px; width: 287px;}
.sdgTextBlocks .sdg8Text{ bottom: 88px; left: 690px; width: 440px;}
.sdgTextBlocks .sdg9Text{ bottom: 12px; left: 617px; width: 480px; }
.sdgTextBlocks .sdg10Text{ bottom: 53px; left:42px; width: 370px;   }
.sdgTextBlocks .sdg11Text{ bottom: 154px; left:1px; width: 292px;}
.sdgTextBlocks .sdg12Text{ bottom: 254px; left:-10px; width: 260px;}
.sdgTextBlocks .sdg13Text{ bottom: 382px; left:0; width: 220px; }
.sdgTextBlocks .sdg14Text{ bottom: 556px; left:0; width: 225px;}
.sdgTextBlocks .sdg15Text{ bottom: 654px; left:0; width: 310px; }
.sdgTextBlocks .sdg16Text{ bottom: 748px; left: 2px; width:440px;  }
.sdgTextBlocks .sdg17Text{ bottom: 823px; left: 65px; width:405px; }

.innerLogo{width: 171px; position: absolute; top: 323px; left: 463px; z-index: 0;}
.circle{ width: 200px; height: 200px; }
.circle .cirPlc{ visibility: hidden; opacity: 0;  transition: all 0.5s ease-in-out;;}
.circle .cirPlc.show{ visibility: visible; opacity: 1; position: absolute; z-index: 0}
.circle .cirPlc.showPermanant{ visibility: visible; opacity: 1; position: absolute; z-index:9999;}
.circle .cirPlc.inrCircHide{visibility: hidden;}
.circle .cirPlc.inrCircHide.show{visibility: hidden;}


.MainFooter{ position:absolute; bottom:0; width:100%; height:44px; background:#fff; box-shadow:0 0 10px #ccc;}


.MainFooter .footerLeft{ float: left;border-right: 1px solid #2c2c2c; }
.MainFooter .footerLeft a{padding: 10px; color: #2c2c2c; font-size: 24px; float: left; }
.MainFooter .footerLeft .sharePage{ float: left; visibility: hidden; max-width:0; max-height: 0; overflow: hidden; transition: all 0.5s ease-in-out}
.MainFooter .footerLeft .sharePage.active{ max-width:300px; visibility: visible; max-height: 100px; }




.MainFooter .footerRight{ float:right; border-left: 1px solid #2c2c2c; }
.MainFooter .footerRight a{padding: 14px 10px; color: #2c2c2c; font-size: 16px; float: left;}
.MainFooter .footerRight a i{font-size: 14px;}