/*-------------------------------------------------------------*/
/* Fonts */
@font-face {
  font-family: 'Open_Sans';
  font-style: normal;
  	src: url('../fonts/Open_Sans.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Open_Sans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../fonts/Open_Sans.woff') format('woff'), /* Modern Browsers */
	     url('../fonts/Open_Sans.ttf')  format('truetype'); /* Safari, Android, iOS */
}

.opens {
	font-family: 'Open_Sans', 'Trebuchet MS', Sans-Serif;
}



body {
	margin: 0;
	font-family: 'Open_Sans', Sans-Serif;
	color: #333333;
	width: 100%;
	height: 100%;
  overflow-x: hidden;
}


h1, h2, h3, h4{
  padding: 0px;
  margin: 0px;
}


/*-------------------------------------------------------------*/
/* Banner */

.topBanner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #1a6033;
  background: -webkit-radial-gradient(circle at top right, #063718, #1a6033); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(circle at top right, #063718, #1a6033); /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(circle at top right, #063718, #1a6033); /* For Firefox 3.6 to 15 */
	background-image:
    radial-gradient(
      circle at top right,
      #063718,
      #1a6033
    );
  width: 100%;
  height: 40px;
}


.bannerTxt {
  display: inline-block;
  color: #FFFFFF;
  line-height: 40px;
  padding: 0 2%;
  font-size: 0.8em;
}

.subscribe {
  display: inline-block;
  float: right;
  background: #B1081D;
  color: #FFFFFF;
  height: 100%;
  line-height: 40px;
  padding: 0 1%;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: bold;
}



.defBannerWrapper {
  margin-top: -5px;
  color: #FFFFFF;
}

.defBanner {
  padding: 30px 0;
}

.phonetic {
  font-size: 2.5em;
}

.definition {
  font-size: 1.5em;
}





@media only screen and (min-width: 950px) {
  .bannerTxt {
    font-size: 1em;
  }
  .subscribe {
    font-size: 1em;
  }
}




.contentWrapper{
  position: relative;
  left: 0px;
  top:0px;
  width: 100%;
  text-align: center;
}

.contentWrapper img {
	 text-decoration: none; border: 0px;
}

.mainWrapper {
	width: 100%;
	text-align: center;
	position: absolute;
  top: 160px;
  overflow: hidden;
}



/*-------------------------------------------------------------*/
/* Navigation */
.navWrapper {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
	display:inline-block;
	height: 120px;
	z-index: 998;
  background: #FFFFFF;
}

.navWrapper a {
  color: #063718;
  text-outline: 1px 1px #FFFFFF;
}

.logo{
	display:inline-block;
  position: fixed;
  z-index: 999;
	left: 2%;
	top: 40px;
  padding: 10px 0;
  height: 90px;
}

.logo a{
	text-decoration:none;
	border: none;
  color: #333333;
}

.logo a img {
	border: none;
  height: 90px;
}



.menu_icon{
	position: fixed;
	display: none;
  right: 2%;
	font-size: 0.8em;
	text-align: center;
    cursor: pointer;
	z-index: 2002;
}
.menu_icon img{
	padding-top: 20px;
	width: 25px;
}

.menu{
	position: fixed;
	width: 100%;
	top: 130px;
	bottom: 0;
	background: #063718;
	color: #FFFFFF;
	z-index: 990;
	font-size: 1.4em;
	text-align: center;
	display: none;
	padding-top: 70px;
}

.menu a{
	text-decoration:none;
	color: #333333;
}

.menuOption{
	width: 100%;
	padding: 1% 0px;
	border-bottom: 1px solid #888888;
  text-align: left;
}

.menuOption a {
  margin-left: 20%;
}
.menuOption:hover a {
  color: #ad2020;
}



.menuOption a img{
	border: none;
	height: 35px;
	width: 35px;
	padding: 0px 20px;
}

.mSocial{
	position: relative;
	display: inline-block;
	margin: 0 auto;
  width: 100%;
}
.mSocial a img {
	padding: 15px 10px;
	height: 40px;
	width: 40px;
}


.mSocial a img:hover {
  -webkit-filter: opacity(30%); /* Safari */
  filter: opacity(30%);
}

.navbar { display: none; }

.selectedNav  {
	background: #FCEBFB;
}


@media only screen and (min-width: 950px){

  .navbar { display: block; }
  .navbar{
    width: auto;
    text-align: right;
    margin-right: 3%;
    margin-top: 1%;
  }
  .navbar a{
    text-decoration:none;
    padding: 0px 10px;
		color: #063718;
    font-weight: bold;
  }
  .sub_menu {
    background: #FFFFFF;
  }

  .sub_menu a {
    font-weight: normal;
  }

  .downarrow {
    font-size: 0.6em;
  }
  ul#nav, ul#nav ul.sub_menu {
    padding: 0px;
    margin: 0px;
  }
  ul#nav li, ul#nav ul.sub_menu li {
    list-style-type: none;
    display: inline-block;
  }

  ul#nav li a, ul#nav li ul.sub_menu li a {
    text-decoration: none;
    display:inline-block;
    height: 30px;
    text-align: center;
    padding: 5px 10px 0px 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    line-height: 85px;
    font-family: sans-serif;
  }

  ul#nav li {
    position: relative;
  }
  ul#nav li a:hover{
    text-decoration: underline;
  }

  ul#nav li ul.sub_menu {
    display:none;
    position: absolute;
    text-align:left;
    width: auto;
  }

  ul#nav li:hover ul.sub_menu {
    display:block;
  }

  ul#nav li:hover ul.sub_menu li:hover a {
    text-decoration:none;
  }
  .no_select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

}


.picBackMobileMenu {
    background-image: linear-gradient(
      #FFFFFF,
      #888888
    );
	background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.navWhite {
  -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    transition: all 0.9s ease;
	background: #FFFFFF;
}

.navNone {
  -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    transition: all 0.9s ease;
	background: none;
}








/*-------------------------------------------------------------*/
/* newPage */

.newPage {
  min-height: 100vh;
  width: 100%;
  overflow:hidden;
}

.newPage-short {
  min-height: 70vh;
  width: 100%;
  overflow: hidden;
}

.newPage-nano {
  width: 100%;
  overflow: hidden;
  padding: 0;
}











/*-------------------------------------------------------------*/
/* Backgrounds */

.allBack {
    background-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.0)
    ), url(../images/voting.png);
  background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.intropic img {
  width: 100%;
  padding: 0;
}


.backGreen {
  background: #1a6033;
}
.backGreenGradient {
  background: #1a6033;
  background: -webkit-radial-gradient(circle at top right, #063718, #1a6033); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(circle at top right, #063718, #1a6033); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle at top right, #063718, #1a6033); /* For Firefox 3.6 to 15 */
  background-image:
    radial-gradient(
      circle at top right,
      #063718,
      #1a6033
  );
}





/* section */
.sectionWrapper {
  width: 100%;
  padding: 30px 0;
  font-size: 1.4em;
  background: rgba(255, 255, 255, 0.52);
}
.sectionContainer {
  width: 100%;
  padding: 0px;
}
.sectionTxt {
  display: inline-block;
  width: 85%;
  text-align: left;
  font-weight: bold;
}


@media only screen and (min-width: 950px) {
  .sectionWrapper {
    background: none;
  }
  .sectionTxt {
    width: 100%;
  }

  .sectionContainer {
    width: 45%;
    float: right;
    padding: 20px;
    background: rgba(255, 255, 255, 0.52);
  }
}







/*-------------------------------------------------------------*/
/* Display Modes */
.deskview { display: none !important; }
.mobileview { display: inline-block !important; }

.hideIt { display: none !important; }

@media only screen and (min-width: 950px){
	.deskview { display: inline-block !important; }
	.mobileview { display: none !important; }
}