body, html {
  overflow-x: hidden;
}
.heroContent_right{
    background-color: var(--darkGreen);
/*background-image: linear-gradient(var(--darkBlue),var(--darkBlue2) 80%),
url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.716 0 0 6.716 0 15c8.284 0 15-6.716 15-15zM0 15c0 8.284 6.716 15 15 15 0-8.284-6.716-15-15-15zm30 0c0-8.284-6.716-15-15-15 0 8.284 6.716 15 15 15zm0 0c0 8.284-6.716 15-15 15 0-8.284 6.716-15 15-15z' fill='%2377ba43' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");*/

background-image: linear-gradient(to right,rgba(2, 37, 96, 0.988) 80%,rgba(4, 58, 154, 0.95) 100%),url("../images/web/heroRight_bg.svg");
/*background-image: linear-gradient(to right,rgba(245, 151, 33, 0.988) 80%,rgba(254, 234, 61, 0.95) 100%),url("../images/web/heroRight_bg.svg");*/

  background-position: center bottom;
  background-repeat: repeat;
  border:1px solid grey;
  padding: 10px;
}

.heroContent_right .logo {
padding: 10px;
background-color: #fff;
width: 50%;
margin: 0 auto;
}

#imageRightCol .CommitteeContainer #committeeCol {
  margin-bottom: 11px !important;
}

#imageRightCol .CommitteeContainer .imageTxtBox {
  background-color: var(--section-bg-color);
  background: linear-gradient(0deg, rgb(248, 150, 37) 35%, rgba(255,153,138,1) 100%);
 /* background: linear-gradient(0deg,  rgba(40,156,46,1) 35%, rgba(196,27,11,1) 100%,rgba(246,208,53,1) 0%);*/
  height: 240px;
  padding-top: 12px;
  color:#000;
  font-weight: bold;
  font-size: 13.5px;
  border: 4px solid gold;
  border-radius: 20px;
}

#imageRightCol .CommitteeContainer .imageTxtBox .images {
  height:140px;
  width: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.imageTxtBox .label1 {
  margin-top: 10px;
}

#imageRightCol .CommitteeContainer .imageTxtBox b {
  font-weight: normal !important;
  font-style: italic;
  color: darkred;
}

.imageTxtBox .images img {
  height: 100%;
  width: 100%;
}

.heroBoxText {
    margin: 25px 10px;
    padding: 10px;
}

.heroBoxText h2 {
    color: var(--orange);
}

.heroBoxText h3 {
    color: var(--lightGrey);
}

.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    var(--darkBlue2) 0%,
    var(--orange) 29%,
    var(--orange) 67%,
    var(--yellow) 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 4s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.custom-btn {
    background-color: var(--yellow);
    font-size: 16px;
}

.importantLinks .iconImg img{
    height: 120px;
    width: 120px;
border-radius: 50%;
border: 1px solid var(--orange);
}

.rotate{
  animation: spinner 1.5s linear infinite; 
}
@keyframes spinner {
  to { transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner {
  display: inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}

.flip {
    transition: all 2s;
    position: relative;
}


.flip:hover {
    transform: rotateY(180deg);
    transition: all 2s;
}

#orgTeam .img img{
height: 160px !important;
}

#orgTeam .label {
    padding: 12px;
    font-weight: bold;
}

#orgTeam .team {
    box-shadow: 0px 0px 2px grey;
    padding: 8px;
    margin: 1px;
    height: 270px;
}

#orgButton {
    margin-top: 25px;
}

.section-title h2
{
  color: var(--darkRedTitle);
  font-size: 2rem;
  position: relative;
}

.toLeft {
  position: relative;
  left: -2000px;
}
/*
.section-title h2::before {
  position: absolute !important;
  left: 0 !important;
  bottom: 0;
  width: 85px !important;
  height: 4px !important;
  content: "" !important;
  right: 0px !important;
  background-color: red !important;
}

.section-title h2::after{
  position: absolute !important;
  left: 0 !important;
  bottom: 0;
  width: 85px !important;
  height: 4px !important;
  content: "" !important;
  right: 0px !important;
  background-color: red !important;
}
*/

.footerBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;  
}

.footerBottom p {
  padding: 10px;
  color: var(--white-color);
}

.venue-img {
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0px 0px 3px darkgrey;
}

.venue-img img {
  width:100%;
}

.distanceTravel
{
  padding: 12px;
  margin: 10px auto;
  box-shadow: 0px 3px 2px grey;
}

.timerSection {
  background: var(--darkBlue);
  margin-top: -20px;
  box-shadow: 0px 3px 8px grey;
}

.timerSection .timer {
  padding: 20px;
}

.timer .boxed {
  margin: 10px;
  padding: 10px;
  text-align: center;
  height: 180px;
  width: 180px;
  box-shadow: 2px 2px 3px grey;
  /*background: linear-gradient(90deg, rgba(247,245,3,1) 0%, rgba(217,233,2,1) 35%, rgba(255,218,0,1) 100%);*/
  border: 3px dotted #fff;
  outline: 6px solid gold;
  outline-offset: 10px;
  font-weight: bold !important;

  font-size: 85px;
  color:#fff;
  border-radius: 5px;
}

.timer .timerLabel {
  font-size: 35px;
  background-color: #fff;
  color:var(--darkBlue);
  margin-top: 32px;
  text-align: center;
  border-radius: 5px;
}

.programImage {
  background-color: var(--yellow);
  color: darkblue;
  padding: 25px 35px;
  text-align: center;
}

.programImage img {
  width: 100%;
}

.blink{
  width:200px;
  background-color: #0d6efd;
  padding: 15px;  
  text-align: center;
  animation: blink 1s linear infinite;
  color: darkred !important;
  font-weight: bold !important;
}

@keyframes blink {
0%{background-color: #0d6efd;}
50%{background-color: #8ce1f8;}
100%{background-color: #0bf;}
}


nav {
  margin: 0 !important;
  padding: 0 !important;
}

.programLabel {
  color: var(--white-color);
  padding: 15px;
  text-align: center;
  border-radius: 15px;
  margin-top: 20px;
}

.programLabel a {
  color: var(--white-color);
}

:root{
    /* ---- theme */
  --green:#77c75b;
  --semiGreen:#77ba43;
  --darkBlue:#074442;
  --darkBlue2:#083c3a;
  --darkGreen:#116943;
  --orange:#f59721;
  --lightGreen:#cbd994;
  --yellow:#feea3d;
  --skyblue:#0983ff;
  --skyblueDark:#012872;
  --skyblueSemi:#0a40aa;
  --grey:#ebebeb;
  --lightGrey:#efefef;

  --white-color:                  #ffffff;
  --primary-color:                #feea3d;
  --secondary-color:              #3D405B;
  --section-bg-color:             #0983ff;
  --custom-btn-bg-color:          #012872;
  --custom-btn-bg-hover-color:    #083c3a;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --link-hover-color:             #feea3d;
  --lightSkyblue:#8ce1f8;
  --darkRedTitle:darkred;
}

.skyBlueBG {
  background-color: var(--skyblue);
  color:var(--lightGrey);
}

.darkskyBlueBG {
  background-color: var(--skyblueDark);
  color:var(--lightGrey);
  border:2px solid gold !important;
}

.darkskyBlueBGHover:hover {
  background-color: var(--yellow) !important;
  color: var(--skyblueDark) !important;
}

.shadowWhite {
  box-shadow: 0px 0px 3px var(--white-color);
}

.shadowYellowHover:hover {
  box-shadow: 0px 0px 9px var(--yellow);
  transition: all 2s;
}

.skyblueLightGB {
background-color: var(--lightSkyblue);
color: var(--custom-btn-bg-color);
}

.about-section, body {
  background-image: url('../images/web/message_bg.png');
}

.orangeBG {
  background-color: var(--orange);
}

.bold {
  font-weight: bold;
}

/* imported */
.about-us-area-2 {
  position: relative;
  background-image: url(../images/web/venue_1.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto;
  padding: 40px 0px;
}

.section-text-content-area {
  position: relative;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  margin: 30px auto;
  padding: 15px 15px 30px;
  box-shadow: 0px 0px 30px 0px rgba(20, 50, 208, 0.15);
}


.eventContent {
  background-color: rgba(255,255,255,0.85);
  box-shadow: 0px 0px 30px 0px rgba(20, 50, 208, 0.15);
  padding: 15px;
}

.pageTitle {
  box-shadow: 2px 3px 2px grey;
  color: var(--darkRedTitle);
  padding: 10px;
  text-transform: capitalize;
  position: relative;
}

.section-titles h2::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 2px;
  background: var(--skyblueDark);
  bottom: -4px;
  margin: 0 auto;
}

.section-titles h2::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background: var(--skyblue);
  bottom: -6px;
  left: 0;
  margin: 0 auto;
}

#team {
  margin-bottom: 12px;
}
/* animation */

/* spin bg */
.spin-bg {
  animation: spin 1s linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bounce-in-right {
  animation: bounce-in-right 2s ease;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* from left */
.bounce-in-left {
  animation: bounce-in-left 2s ease;
}
@keyframes bounce-in-left {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* bounce-titter */
.animated { 
  -webkit-animation-duration: 5s;
  animation-duration: 5s; 
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both;
  animation-delay: 3s; 
}

@-webkit-keyframes bounce { 
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
  40% {-webkit-transform: translateY(-60px);} 
  60% {-webkit-transform: translateY(-30px);} 
} 

@keyframes bounce { 
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
  40% {transform: translateY(-30px);} 
  60% {transform: translateY(-15px);} 
}

.bounce { 
  -webkit-animation-name: bounce; 
  animation-name: bounce; 
}


@-webkit-keyframes bounce2 { 
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
  40% {-webkit-transform: translateY(60px);} 
  60% {-webkit-transform: translateY(30px);} 
} 

@keyframes bounce2 { 
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
  40% {transform: translateY(30px);} 
  60% {transform: translateY(15px);} 
}

.bounce2 { 
  -webkit-animation-name: bounce2; 
  animation-name: bounce2; 
}
/* wave text */
.waveTextAnimated span {
  display: inline-block;
  -webkit-animation: wave-text 2.5s ease-in-out infinite;
          animation: wave-text 2.5s ease-in-out infinite;
}
.waveTextAnimated span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.waveTextAnimated span:nth-of-type(2) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}
.waveTextAnimated span:nth-of-type(3) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.waveTextAnimated span:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.waveTextAnimated span:nth-of-type(5) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}

.waveTextAnimated span:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.waveTextAnimated span:nth-of-type(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.waveTextAnimated span:nth-of-type(7) {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
}

.waveTextAnimated span:nth-of-type(8) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}

.waveTextAnimated span:nth-of-type(9) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.waveTextAnimated span:nth-of-type(10) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
@-webkit-keyframes wave-text {
  0% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.3em);
  }
  100% {
    transform: translateY(0em);
  }
}
 
@keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.3em);
  }
  100% {
    transform: translateY(0em);
  }
}

/*ocean wave */
.ocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #015871;
}

.oceanwave {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
  position: absolute;
  width: 6400px;
  top: -198px;
  left: 0;
  height: 198px;
  transform: translate(0, 0, 0);
  animation: wave 7s ease infinite;
}

.oceanwave:nth-of-type(2) {
  top: -168px;
  animation: swell 4s ease infinite;
  opacity: 1;
}

@keyframes wave {
  0% { margin-left: 0; }
  100% { margin-left: -1600px;}
}
@keyframes swell {
  0%, 100% {
    transform: translate(0, -30px);
  }
  50% {
    transform: translate(0, 5px);
  }
}

/* phone ring */

.phoneRing {
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@keyframes ring {
  0% { transform: rotate(0); }
  5% { transform: rotate(30deg); }
  10% { transform: rotate(-28deg); }
  15% { transform: rotate(34deg); }
  20% { transform: rotate(-32deg); }
  25% { transform: rotate(30deg); }
  30% { transform: rotate(-28deg); }
  35% { transform: rotate(26deg); }
  40% { transform: rotate(-24deg); }
  45% { transform: rotate(22deg); }
  50% { transform: rotate(-20deg); }
  55% { transform: rotate(18deg); }
  60% { transform: rotate(-16deg); }
  65% { transform: rotate(14deg); }
  70% { transform: rotate(-12deg); }
  75% { transform: rotate(10deg); }
  80% { transform: rotate(-8deg); }
  85% { transform: rotate(6deg); }
  90% { transform: rotate(-4deg); }
  95% { transform: rotate(2deg); }
  100% { transform: rotate(-1deg); }
}

.wavUpDown {
  animation: upDown 3s ease-in-out infinite;
  transform-origin: 50% 4px;
  position: relative;
}

@keyframes upDown {
  0% {margin-top: 0px;color:var(--green)}
  50% {margin-top: -10px;color:var(--custom-btn-bg-color);}
  100% {margin-top: 0px;color:red;}
}

/*earth rotation */
.iconSize {
  height:26px;
  width:26px;
  display: inline-block;
  vertical-align: middle;
}
#earthRotate {
 /* height:30px;
  width:30px;*/
  background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  /*box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);*/
  animation-name: earthRotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: earthRotate;
     -webkit-animation-duration: 12s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
}
@keyframes earthRotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}
@-webkit-keyframes earthRotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}



/* animation end */

/* effects */

.curl {
	width:120px;
	height:120px;
	position: relative;
	top:-10px;
	left:-10px;
	background : 
		linear-gradient(
			135deg, 
			#fff, 
			#f3f3f3 45%, 
			#ddd 50%, 
			#aaa 50%, 
			#bbb 56%, 
			#ccc 62%, 
			#f3f3f3 80%,
			#fff 100%
		);
	box-shadow : 0 0 10px rgba(0, 0, 0, .5);
	transition: all .5s ease;
}
.curl:before,
.curl:after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 12.5%;
	bottom: 5.8%;
	width: 70%;
	max-width: 300px;
	max-height: 100px;
	height: 55%;
	box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
	transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
	left: auto;
	right: 5.8%;
	bottom: auto;
	top: 14.16%;
	transform: skew(-15deg) rotate(-84deg);
}

.curl:hover {
	width: 240px;
	height: 240px;
}
.curl:hover:before,
.curl:hover:after {
	box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}