@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/opensans-regular.eot');
    src: url('../fonts/opensans-regular.eot') format('embedded-opentype'),
         url('../fonts/opensans-regular.woff2') format('woff2'),
         url('../fonts/opensans-regular.woff') format('woff'),
         url('../fonts/opensans-regular.ttf') format('truetype'),
         url('../fonts/opensans-regular.svg#OpenSansRegular') format('svg');
}

.fa {
  display: inline-block;
  font: normal normal normal 16px FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
 }
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.roll{
	 width: 100%;
	 height: 100%;
	 display: block;
	 position: relative;
	 text-align: center;
	 font-weight: bold;
	 font-family: open sans !important;
}
.roll .ravin {
    left: 97px;
    position: absolute;
    top: 16%;
    z-index: 20;
     -webkit-transform: rotate(-46deg);
-moz-transform: rotate(-46deg);
transform: rotate(-46deg);


}
.roll .ravin, .roll .rehabilitation, .roll .response, .roll .disaster, .roll .preparation, .roll .early {
 font-size: 17px;
}
.roll .ravin .fa {
  vertical-align: -moz-middle-with-baseline;
  vertical-align:-webkit-baseline-middle;
}
.roll .txt1 {
 left: 20px;
    position: absolute;
    top: 359px;
 -webkit-transform: rotate(-108deg);
-moz-transform: rotate(-108deg);
transform: rotate(-108deg);
}
.roll .txt1 .fa {
  vertical-align:-10px;
}
.roll .txt2 {
	left: 358px;
    position: absolute;
    top: 22px;
   -webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.roll .txt2 .fa {
  vertical-align:-5px;
  
}
.roll .txt3 {
	 left: inherit;
    position: absolute;
    right:31px;
    top: 37%;
     -webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
transform: rotate(75deg);
}
.roll .txt3 .fa {
  vertical-align: -11px;
}
.roll .txt4 {
	 bottom: 16%;
    left: inherit;
    position: absolute;
    right: 89px;
    top: inherit;
    -webkit-transform: rotate(134deg);
-moz-transform: rotate(134deg);
transform: rotate(134deg);
}
.roll .txt4 .fa {
  vertical-align: -10px;
}
.roll .txt5 {
	bottom: 4%;
    left: 205px;
    position: absolute;
    right: inherit;
    top: inherit;
    -webkit-transform: rotate(-167deg);
-moz-transform: rotate(-167deg);
transform: rotate(-167deg);
}
.roll .txt5 .fa {
  vertical-align: -10px;
}




img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
}
  #rotation {
   display:block;
    height: 100%;
    width: 100%;
    /*border: 30px solid #F37E36;*/
    border-radius: 50%;
    position: relative;
    z-index: 8;
    transition: all 4s !important;
     animation: spin 80s linear 0s infinite normal !important;
    -moz-animation: 80s linear 0s normal none infinite spin !important;
    -webkit-animation: spin 80s linear 0s infinite normal !important;
    -0-animation: spin 80s linear 0s infinite normal !important;
  }
  .outer{
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 8;
    transition: all 4s;
    padding: 20px 0px;
  }
 
  .outerafter{
    content: "Spritual";
    color: #FFF;
    position: absolute;
    top: 55%;
    left: 55%;
    width: 60px;
    height: 60px;
   /* -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    border-radius: 50%;
    background-color: #222;
    z-index: 10;
  }
  .bigouterafter{
    content: "Spritual";
    color: #FFF;
    position: absolute;
    top: 55%;
    left: 55%;
    width: 100px;
    height: 100px;
   /* -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    border-radius: 50%;
    background-color: #504D80;
    z-index: 9;
  }
  .spoke {
    position: absolute;
   /* transform-origin: left center;*/
    height: 40px;
    width: 30%;
    left: 50%;
    top: calc(50% - 20px);
    text-align:right;
    z-index: 2;
   /* transform: rotate(360deg);*/
    color: #FFF;
  }
  .spoke a{
    color: #fff;
    display: block;
    text-decoration: none;
  }
  .spoke a:hover{
    color: #fff;
    display: block;
    text-decoration: none;
  }
  .upperSpokes{
    background: #BB7C3D;
  }
  .lowerSpokes{
    background:#A1A831
  }
  .circleTxt{
    position: absolute;
  }
  .ravin{
    position: absolute;
    transform:rotate(-57deg);
    z-index: 20;
  }
  .spoke {
    font-size: 13px;
  }
  .roll .spok7{
   width: 26%;
    height: 37px;
    left: 20.3%;
    line-height: 13px;
    text-align: center;
    top: 28%;
     transform:rotate(-137deg) !important;
     -moz-transform:rotate(-137deg) !important;
     -webkit-transform:rotate(-137deg) !important;

  }
.roll .spok7:hover, .roll .spok10:hover, .roll .spok11:hover, .roll .spok5:hover, .roll .spok1:hover , .roll .spok2:hover, .roll .spok4:hover, .roll .spok8:hover{
  background: #ddb95b;
  border-radius:20px 0px 0px 20px;
}
  .roll .spok8{
height: 37px;
    left: 30.4%;
    line-height: 13px;
    text-align: center;
    top: 20.5%;   
    width: 26%;
     -webkit-transform: rotate(-107deg) !important;
-moz-transform: rotate(-107deg) !important;
    transform: rotate(-107deg) !important;
  }
 .roll .spok9:hover, .roll .spok12:hover, .roll .spok6:hover, .roll .spok3:hover{
  background: #d0d349;
  border-radius:20px 0px 0px 20px;
}
 .roll .spok8 .spoke-text, .roll .spok10 .spoke-text, .roll .spok4 .spoke-text{
    line-height: 31px;
  }
 .roll .spok9 .spoke-text {
  line-height: 35px;
 }
 .roll .spok12 .spoke-text a{
     line-height:17px;
     
 }
 .roll .spok6 .spoke-text a{
     line-height:34px;
     font-size: 12px;
 }
 .roll .spok2 .spoke-text a{
     line-height: 30px;
 }
 .roll .spok11 .spoke-text{
     line-height:33px;
 }
 .roll .spok1 .spoke-text a{
     line-height:33px;
 }
 .roll .spok3 .spoke-text a{
     line-height:17px;
     font-size: 12px;
 }
 .roll .spok5 .spoke-text{
     line-height:33px;
 }
 .roll .spok7 .spoke-text{
  line-height: 17px;
 }
  .roll .spok .spoke-text a{font-size:11px;}
 
 
  .roll .spok9{
   height: 37px;
    left: 42.3%;
    line-height: 13px;
    text-align: center;
    top: 20.5%; 
    width: 26%;
     -webkit-transform: rotate(-76deg) !important;
-moz-transform: rotate(-76deg) !important;
    transform: rotate(-76deg)!important;
  }
  .roll .spok10{
   height: 37px;
    left: 53%;
    line-height: 13px;
    text-align: center;
    top: 27.2%;
    width: 26%;
     -webkit-transform: rotate(-46deg) !important;
-moz-transform: rotate(-46deg) !important;
    transform: rotate(-46deg)!important;
  }
  .roll .spok11{
   height: 37px;
    left: 59%;
    line-height: 13px;
    text-align: center;
    top: 39%;
    width: 26%;
     -webkit-transform: rotate(-17deg)!important;
-moz-transform: rotate(-17deg) !important;
    transform: rotate(-17deg)!important;
  }

  .roll .spok12{
    height: 37px;
    left: 59.4%;
    line-height: 13px;
    text-align: center;
    top: 52.7%;  
    width: 26%;
     -webkit-transform: rotate(13deg)!important;
-moz-transform: rotate(13deg) !important;
    transform: rotate(13deg)!important;
  }
  .roll .spok1{
   height: 37px;
    left: 53.7%;
    line-height: 13px;
    text-align: center;
    top: 65%; 
    width: 26%;
     -webkit-transform: rotate(44deg)!important;
-moz-transform: rotate(44deg) !important;
    transform: rotate(44deg)!important;
  }
  .roll .spok2{
   height: 37px;
    left: 43.5%;
    line-height: 13px;
    text-align: center;
    top: 72%;
    width: 26%;
     -webkit-transform: rotate(74deg)!important;
-moz-transform: rotate(74deg) !important;
    transform: rotate(74deg)!important;
  }
  .roll .spok3{
   height: 37px;
    left: 31.6%;
    line-height: 13px;
    text-align: center;
    top: 72.4%;
    width: 26%;
     -webkit-transform: rotate(104deg)!important;
-moz-transform: rotate(104deg) !important;
    transform: rotate(104deg)!important;
  }
  .roll .spok3 .spoke-text a{
       line-height:35px;
  }
  .roll .spok4{
   height: 37px;
    left: 21.2%;
    line-height: 13px;
    text-align: center;
    top: 65.8%;
    width: 26%;
     -webkit-transform: rotate(134deg)!important;
-moz-transform: rotate(134deg) !important;
    transform: rotate(134deg)!important;
  }
  .roll .spok5{
    height: 37px;
    left: 14.7%;
    line-height: 13px;
    text-align: center;
    top: 54.4%;
    width: 26%;
     -webkit-transform: rotate(164deg)!important;
-moz-transform: rotate(164deg) !important;
    transform: rotate(164deg)!important;
  }
  .roll .spok6{
    height: 37px;
    left: 14.4%;
    line-height: 13px;
    text-align: center;
    top: 40.4%;  
    width: 26%;
     -webkit-transform: rotate(193deg)!important;
-moz-transform: rotate(193deg) !important;
    transform: rotate(193deg)!important;
  }


  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
}
.rotted-mid-box{
  background: #7a549f;
    border-radius: 100%;
    bottom: 0;
    height: 122px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 40%;
    width: 125px;
    z-index: 2147483647;
    cursor: pointer;
}
.rotted-mid-box span{
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}
.rotted-mid-box:hover{
  background: #8c61ba;
}
.rotted-mid-box a, .rotted-mid-box a:hover{
  color: #fff;
   display: block;
    height: 100%;
    text-decoration: none;
    width: 100%;
}
.rotted-mid-box-small{
  background: #000000;
    border-radius: 100%;
    bottom: 0;
    height: 77px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 43.6%;
    width: 77px;
    z-index: 2147483647;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
  font-size: 13px;
  line-height: 71px;
}
.rotted-mid-box-small:hover{
  background: #1e1d1d
}
.rotted-mid-box-small a, .rotted-mid-box-small a:hover{
  color: #fff;
   display: block;
    height: 100%;
    text-decoration: none;
    width: 100%;

}
#rotation a span{ color: #000;font-family: open sans !important;}
#outer a{
  color: #fff;
  text-decoration: none;
}
#outer a:hover{
  color: #fff;
  text-decoration: none;
}