.rrssb-buttons {
  box-sizing: border-box;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  height: 36px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.rrssb-buttons:after {
  clear: both;
}

.rrssb-buttons:after, .rrssb-buttons:before {
  content: ' ';
  display: table;
}

.rrssb-buttons li {
  box-sizing: border-box;
  float: left;
  height: 100%;
  line-height: 13px;
  list-style: none;
  margin: 0;
  padding: 0 2px;
}

.rrssb-buttons li.rrssb-email a {
  background-color: #0a88ff;
}

.rrssb-buttons li.rrssb-email a:hover {
  background-color: #006ed6;
}

.rrssb-buttons li.rrssb-facebook a {
  background-color: #306199;
}

.rrssb-buttons li.rrssb-facebook a:hover {
  background-color: #244872;
}

.rrssb-buttons li.rrssb-tumblr a {
  background-color: #32506d;
}

.rrssb-buttons li.rrssb-tumblr a:hover {
  background-color: #22364a;
}

.rrssb-buttons li.rrssb-linkedin a {
  background-color: #007bb6;
}

.rrssb-buttons li.rrssb-linkedin a:hover {
  background-color: #005983;
}

.rrssb-buttons li.rrssb-twitter a {
  background-color: #26c4f1;
}

.rrssb-buttons li.rrssb-twitter a:hover {
  background-color: #0eaad6;
}

.rrssb-buttons li.rrssb-googleplus a {
  background-color: #e93f2e;
}

.rrssb-buttons li.rrssb-googleplus a:hover {
  background-color: #ce2616;
}

.rrssb-buttons li.rrssb-youtube a {
  background-color: #df1c31;
}

.rrssb-buttons li.rrssb-youtube a:hover {
  background-color: #b21627;
}

.rrssb-buttons li.rrssb-reddit a {
  background-color: #8bbbe3;
}

.rrssb-buttons li.rrssb-reddit a:hover {
  background-color: #62a3d9;
}

.rrssb-buttons li.rrssb-pinterest a {
  background-color: #b81621;
}

.rrssb-buttons li.rrssb-pinterest a:hover {
  background-color: #8a1119;
}

.rrssb-buttons li.rrssb-pocket a {
  background-color: #ed4054;
}

.rrssb-buttons li.rrssb-pocket a:hover {
  background-color: #e4162d;
}

.rrssb-buttons li.rrssb-github a {
  background-color: #444;
}

.rrssb-buttons li.rrssb-github a:hover {
  background-color: #2b2b2b;
}

.rrssb-buttons li.rrssb-instagram a {
  background-color: #517fa4;
}

.rrssb-buttons li.rrssb-instagram a:hover {
  background-color: #406582;
}

.rrssb-buttons li.rrssb-delicious a {
  background-color: #0B79E5;
}

.rrssb-buttons li.rrssb-delicious a:hover {
  background-color: #095fb4;
}

.rrssb-buttons li.rrssb-vk a {
  background-color: #4d71a9;
}

.rrssb-buttons li.rrssb-vk a:hover {
  background-color: #3d5a86;
}

.rrssb-buttons li.rrssb-hackernews a {
  background-color: #f60;
}

.rrssb-buttons li.rrssb-hackernews a:hover {
  background-color: #cc5200;
}

.rrssb-buttons li a {
  background-color: #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  display: block;
  font-size: 11px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  height: 100%;
  padding: 11px 7px 12px 27px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  width: 100%;
}

.rrssb-buttons li a .rrssb-icon {
  display: block;
  left: 10px;
  padding-top: 9px;
  position: absolute;
  top: 0;
  width: 10%;
}

.rrssb-buttons li a .rrssb-icon svg {
  height: 17px;
  width: 17px;
}

.rrssb-buttons li a .rrssb-icon svg path {
  fill: #fff;
}

.rrssb-buttons li a .rrssb-text {
  color: #fff;
}

.rrssb-buttons li a:active {
  box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, 0.25);
}

.rrssb-buttons li.small a {
  padding: 0;
}

.rrssb-buttons li.small a .rrssb-icon {
  left: auto;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: auto;
  width: 100%;
}

.rrssb-buttons li.small a .rrssb-text {
  visibility: hidden;
}

.rrssb-buttons.large-format, .rrssb-buttons.large-format li {
  height: auto;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(1) a {
  font-size: 20px;
  font-size: 4vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(2) a, .rrssb-buttons.large-format li:first-child:nth-last-child(2) ~ li a {
  font-size: 16px;
  font-size: 2vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(3) a, .rrssb-buttons.large-format li:first-child:nth-last-child(3) ~ li a {
  font-size: 14px;
  font-size: 1.7vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(4) a, .rrssb-buttons.large-format li:first-child:nth-last-child(4) ~ li a {
  font-size: 13px;
  font-size: 1.4vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(5) a, .rrssb-buttons.large-format li:first-child:nth-last-child(5) ~ li a {
  font-size: 13px;
  font-size: 1.2vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(6) a, .rrssb-buttons.large-format li:first-child:nth-last-child(6) ~ li a {
  font-size: 12px;
  font-size: 1.05vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(7) a, .rrssb-buttons.large-format li:first-child:nth-last-child(7) ~ li a {
  font-size: 11px;
  font-size: .9vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(8) a, .rrssb-buttons.large-format li:first-child:nth-last-child(8) ~ li a {
  font-size: 11px;
  font-size: .8vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(9) a, .rrssb-buttons.large-format li:first-child:nth-last-child(9) ~ li a {
  font-size: 11px;
  font-size: .7vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(10) a, .rrssb-buttons.large-format li:first-child:nth-last-child(10) ~ li a {
  font-size: 11px;
  font-size: .6vw;
}

.rrssb-buttons.large-format li:first-child:nth-last-child(11) a, .rrssb-buttons.large-format li:first-child:nth-last-child(11) ~ li a {
  font-size: 11px;
  font-size: .5vw;
}

.rrssb-buttons.large-format li a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .2em;
  padding: 8.5% 0 8.5% 12%;
}

.rrssb-buttons.large-format li a .rrssb-icon {
  height: 100%;
  left: 7%;
  padding-top: 0;
  width: 12%;
}

.rrssb-buttons.large-format li a .rrssb-icon svg {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.rrssb-buttons.large-format li a .rrssb-text {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rrssb-buttons.small-format {
  padding-top: 5px;
}

.rrssb-buttons.small-format li {
  height: 80%;
  padding: 0 1px;
}

.rrssb-buttons.small-format li a .rrssb-icon {
  height: 100%;
  padding-top: 0;
}

.rrssb-buttons.small-format li a .rrssb-icon svg {
  height: 48%;
  position: relative;
  top: 6px;
  width: 80%;
}

.rrssb-buttons.tiny-format {
  height: 22px;
  position: relative;
}

.rrssb-buttons.tiny-format li {
  padding-right: 7px;
}

.rrssb-buttons.tiny-format li a {
  background-color: transparent;
  padding: 0;
}

.rrssb-buttons.tiny-format li a .rrssb-icon svg {
  height: 70%;
  width: 100%;
}

.rrssb-buttons.tiny-format li a:active, .rrssb-buttons.tiny-format li a:hover {
  background-color: transparent;
}

.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path {
  fill: #0a88ff;
}

.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #0054a3;
}

.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path {
  fill: #306199;
}

.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #18304b;
}

.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path {
  fill: #32506d;
}

.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #121d27;
}

.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path {
  fill: #007bb6;
}

.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #003650;
}

.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path {
  fill: #26c4f1;
}

.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #0b84a6;
}

.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path {
  fill: #e93f2e;
}

.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #a01e11;
}

.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon svg path {
  fill: #df1c31;
}

.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #84111d;
}

.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path {
  fill: #8bbbe3;
}

.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #398bcf;
}

.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path {
  fill: #b81621;
}

.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #5d0b11;
}

.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path {
  fill: #ed4054;
}

.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #b61124;
}

.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon svg path {
  fill: #444;
}

.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #111;
}

.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon svg path {
  fill: #517fa4;
}

.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #2f4a60;
}

.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path {
  fill: #0B79E5;
}

.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #064684;
}

.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path {
  fill: #4d71a9;
}

.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #2d4263;
}

.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path {
  fill: #f60;
}

.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path {
  fill: #993d00;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  /* ie 6/7 */
}

html {
  box-sizing: border-box;
  font-size: 16px;
  -ms-overflow-style: none;
}

*, *:before, *:after {
  box-sizing: content-box;
  box-sizing: border-box;
  box-sizing: inherit;
  box-sizing: inherit;
}

::-webkit-scrollbar {
  display: none;
}

html, body, ul, a, p, h1, h2, h3, h4, h5, h6, button {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  vertical-align: middle;
}

body {
  margin: -3px;
  background: url("../images/Bg.jpg") center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  text-transform: uppercase;
}

h2 {
  font-style: italic;
  color: #fff;
  font-size: 1em;
}

li {
  list-style-type: none;
}

p, li {
  line-height: 1.65em;
}

header {
  z-index: 2;
  vertical-align: middle;
}

.ui-page {
  -webkit-backface-visibility: hidden;
}

.ui-panel-wrapper {
  -webkit-backface-visibility: hidden;
}

.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
  margin: 0px;
}

.ui-content {
  width: 100%;
}

.ui-header {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 0 5px black;
  vertical-align: middle;
  height: 12vh;
  line-height: 12vh;
  min-height: 30px;
  background-image: url("../images/Header_Image.jpg");
  background-position: center right;
  background-repeat: no-repeat;
  padding: 0 1em;
  border: none;
}

.ui-header .ui-btn-right {
  right: 1em;
  top: 0;
}

.ui-header .ui-btn-left {
  left: 1em;
}

.ui-title {
  font-size: 1.3em;
  font-weight: 400;
  text-transform: uppercase;
}

.ui-content {
  margin: 0 auto;
}

.ui-listview > li > a.ui-btn,
.ui-li-static {
  border: none;
  border-bottom: 2px solid #142850;
  vertical-align: middle;
}

a {
  color: inherit;
  vertical-align: middle;
}

.ui-content {
  padding: 0;
}

.ui-input-search {
  min-height: 30px;
  border: none;
}

.ui-input-search input {
  color: #142850;
}

.wrapper800 {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5em 0;
  left: 0;
  right: 0;
}

.ui-tabs {
  margin: 0 auto;
  max-width: 800px;
}

.gap {
  background: #E1F1FB;
  position: relative;
  height: 8vh;
  line-height: 8vh;
  padding: 0 1em;
  max-width: 800px;
  margin: 0 auto;
}

.gap li {
  text-transform: uppercase;
}

.side-title {
  color: #666666;
  font-weight: 400;
  font-style: italic;
  font-size: 1em;
}

.fish-latin-name {
  font-family: Times, serif;
  font-size: .75em;
  text-transform: none !important;
}
.fish-latin-name::before { 
    content: "(";
}
.fish-latin-name::after { 
    content: ")";
}

.side-button {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
}

.side-button span {
  display: inline-block;
  line-height: 2em;
  height: 2em;
  background: -webkit-radial-gradient(center, ellipse, #4d7785 0%, #24426b 64%, #142850 100%);
  background: radial-gradient(ellipse at center, #4d7785 0%, #24426b 64%, #142850 100%);
  border-radius: 90px 0px 0px 90px;
  vertical-align: middle;
  padding: 0 0.5em;
  color: #fff;
  font-size: .8em;
  text-align: right;
}

.ui-tabs {
  padding: 0;
  clear: both;
}

.ui-tabs p, .ui-tabs ul, .ui-tabs li {
  padding: 0;
  color: #666666;
}

.ui-tabs-active a {
  background: #CCEDFF;
  color: #142850;
  font-weight: 700;
  border-bottom: 2px solid #CCEDFF;
}

.ui-navbar li .ui-btn {
  height: 8vh;
  line-height: 8vh;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 400;
}

.ui-tabs-panel p {
  display: block;
  padding: 1em;
}

.ui-tabs-panel ul, .ui-tabs-panel ul p, .ui-tabs-panel .ui-listview > li > a.ui-btn, .ui-tabs-panel .ui-li-static {
  padding: 1em;
}

.ui-tabs-panel p:nth-child(odd), .ui-tabs-panel ul:nth-child(odd) {
  background: #E1F1FB;
}

.ui-tabs-panel p:nth-child(even), .ui-tabs-panel ul:nth-child(even) {
  background: #CCEDFF;
}

.logo-head, .fish-image {
  display: block;
  text-align: center;
}

.logo-head h2, .fish-image h2 {
  margin: 0em auto 0.5em auto;
}

.logo-head img, .fish-image img {
  width: 100%;
  max-width: 800px;
  display: block;
  margin-top: -12vh;
}

.logo-head h2, .fish-image h2 {
  font-weight: 400;
  font-size: 1.2em;
}

.logo-head {
  width: 30%;
  max-width: 300px;
  padding: 1em;
}

.logo-head img {
  margin-top: 0vh;
}

#about .content, .fish-info .content, #disclaimer .content {
  min-height: 64vh;
  background: #E1F1FB;
}

#about #reference p {
  height: 8vh;
  line-height: 8vh;
  padding: 0 1em;
}

#about #reference .ui-listview {
  margin: 0;
}

#about #reference ul {
  padding: 0;
}

#about #reference .ui-listview > li > a.ui-btn {
  padding: 0 1em;
}

.ui-title.fish-name-long {
  font-size: .8em;
  margin: 0 12%;
}

.fish-info .fish-indicators {
  position: absolute;
  top: 0;
  right: 3.5em;
}

.fish-image {
  position: relative;
  left: 0;
  right: 0;
}

#disclaimer .content {
  min-height: 88vh;
}

.top-section {
  background: #E1F1FB;
  overflow: auto;
}

.top-section p {
  color: #666666;
  padding: 1em;
}

.tab-section span {
  display: block;
  color: #142850;
  margin-bottom: 1em;
}

.fish-input-mercury, .fish-input-selenium, .fish-input-omega3 {
  color: #142850;
}

.home {
  text-align: center;
  vertical-align: middle;
}

.home .ui-header {
  box-shadow: none;
}

.home .ui-btn, .home .ui-input-search {
  margin: 0em auto 1em auto;
  height: 8vh;
  line-height: 8vh;
  text-transform: uppercase;
}

.home .ui-btn, .home .ui-input-search {
  width: 85%;
  max-width: 480px;
}

.home .logo-home {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.home .logo-home img {
  width: 60%;
  max-width: 300px;
}

.home .logo-home h2, .home .logo-home img {
  margin: 0em auto 1.5em auto;
  font-weight: 400;
  font-size: 1.2em;
  text-transform: none;
}

.ui-icon-delete {
  display: none;
}

.verticWrapper {
  position: absolute;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
  top: 50%;
  left: 0;
  right: 0;
}

.ui-input-search {
  background: #fff;
  padding: 0 1em;
}

.ui-input-search input {
  text-align: center;
  background: none;
  padding: 0 2em;
}

.ui-input-search:after {
  background-position: center;
  left: 1em;
}

#directory form {
  background: #E1F1FB;
  height: 12vh;
  padding: 0 2vh;
  margin: -.5em auto 0 auto;
  max-width: 800px;
}

#directory form .ui-input-search {
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

#directory form .ui-input-search input {
  height: 8vh;
}

#directory .ui-content .ui-listview {
  margin: 0 auto;
  max-width: 800px;
}

#directory .ui-panel-wrapper {
  background: none;
}

.fish-thumb,
.fish-name,
.fish-indicators,
.fish-indicator,
.fish-indicator p {
  display: inline-block;
}

.fish-thumb {
  opacity: 1;
}

.fish-indicators {
  float: right;
}

.fish-indicator {
  font-size: .8em;
  width: 1.75em;
  height: 1.75em;
  line-height: 1.75em;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #fff;
}

.gray {
  background: #666666;
}

.green {
  background: #339933;
}

.yellow {
  background: #FFBC00;
}

.orange {
  background: #FF7A26;
}

.red {
  background: #CC4533;
}

.ui-listview > .ui-li-has-thumb > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-thumb {
  text-transform: uppercase;
  padding-left: 1em;
  position: relative;
  height: 12vh;
  line-height: 12vh;
}

.ui-listview > li p {
  font-size: 1em;
  display: inline-block;
  vertical-align: middle;
}

.ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child,
.ui-listview .ui-li-has-thumb .ui-li-thumb {
  height: 100%;
  padding: 0.75vh 0em;
}

/* IE8- CSS hack */
@media \0screen\,screen\9 {
  .gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff4d7785",endColorstr="#ff142850",GradientType=0);
  }
}

.ui-panel {
  box-shadow: inset 10px 0 5px -5px rgba(20, 40, 80, 0.3);
  background: #4D7791;
}

.sidebar-title {
  height: 8vh;
  line-height: 8vh;
}

.sidebar-title, .sidebar-section {
  border-bottom: 1px solid #142850;
}

.sidebar-section {
  padding: 1em 0;
}

.nav .ui-icon-delete {
  display: inline-block;
}

.navbar {
  margin: 0 -1em;
}

.menu-title {
  height: 12vh;
  line-height: 12vh;
}

.menu a.ui-btn {
  padding: 0;
  margin: 0;
  width: 100%;
  padding: 0 1em;
  height: 12vh;
  line-height: 12vh;
  text-transform: uppercase;
  font-weight: 400;
  background: -webkit-radial-gradient(center center, circle farthest-corner, #4d7785 0%, #24426b 74.2%, #142850 100%);
  background: radial-gradient(circle farthest-corner at center center, #4d7785 0%, #24426b 74.2%, #142850 100%);
  color: #fff;
  border-bottom: 2px solid #142850;
}

.menu-btn.ui-btn.selected {
  background: #CCEDFF;
  color: #142850;
  border-bottom: 2px solid #CCEDFF;
}

.add-info {
  background: #4D7791;
}

.add-info h2, .add-info h3 {
  font-weight: 400;
}

.add-info h2 {
  font-size: 1.2em;
  color: #fff;
  font-style: normal;
}

.add-info h3 {
  font-size: 1em;
  text-transform: uppercase;
  color: #142850;
}

.add-info h3, .add-info p {
  padding: .25em 0;
}

.add-info li {
  margin: .25em 0;
}

.add-info p, .add-info li {
  font-size: 1em;
  line-height: 1.5em;
}

.fish-info .legend, .intro .legend {
  width: 100%;
  position: static;
}

.fish-info .legend li, .intro .legend li {
  display: block;
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  font-size: .8em;
  line-height: 1.75em;
}

.fish-info .legend li > span, .intro .legend li > span {
  display: block;
  position: absolute;
  top: 0;
  left: 2.5em;
  width: 20em;
  text-align: left;
}

.socialShare .share-icon {
  width: 1em;
}

.socialShare .share-title {
  margin-left: 1em;
}

.ui-btn {
  border: none;
  height: 12vh;
  line-height: 12vh;
  min-height: 30px;
  background: -webkit-radial-gradient(center center, circle farthest-corner, #4d7785 0%, #24426b 74.2%, #142850 100%);
  background: radial-gradient(circle farthest-corner at center center, #4d7785 0%, #24426b 74.2%, #142850 100%);
  color: #fff;
  border-bottom: 2px solid #142850;
  vertical-align: middle;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

.semiCircle-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-top: 6vh;
  line-height: 5em;
  height: 5em;
  background-color: rgba(77, 119, 145, 0.45);
  vertical-align: middle;
  width: 3em;
  padding: 0 0.5em;
  color: #fff;
  font-size: .8em;
  z-index: 999999;
  -webkit-transition: background-color 0.3s;
          transition: background-color 0.3s;
}

.semiCircle-btn:hover {
  background: rgba(77, 119, 145, 0.85);
}

.right {
  border-radius: 90px 0px 0px 90px;
  right: 0;
  background-image: url("../images/icon-right.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.right:hover {
  background-image: url("../images/icon-right.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.left {
  border-radius: 0px 90px 90px 0px;
  left: 0;
  background-image: url("../images/icon-left.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.left:hover {
  background-image: url("../images/icon-left.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.rrssb-buttons li {
  float: none;
  height: 12vh;
  line-height: 12vh;
  margin: 0 -1.1em;
}

.rrssb-buttons li a {
  border-radius: 0px;
  padding: 0;
  font-size: 1em;
  background: -webkit-radial-gradient(center center, circle farthest-corner, #4d7785 0%, #24426b 74.2%, #142850 100%);
  background: radial-gradient(circle farthest-corner at center center, #4d7785 0%, #24426b 74.2%, #142850 100%);
  border-bottom: 2px solid #142850;
  text-align: left;
  padding-left: 3em;
}

.rrssb-buttons li a .rrssb-icon {
  padding: 0.25em 0 0 0.5em;
}

#welcome .ui-header, #home .ui-header {
  box-shadow: none;
  position: static;
  background: none;
  position: relative;
}

.intro {
  text-align: center;
  margin-bottom: 12vh;
}

.intro .content {
  min-height: 88vh;
  background: #E1F1FB;
}

.intro .content h2 {
  font-style: italic;
}

.intro .content h2, .intro .content p {
  color: #666666;
  font-size: 1em;
}

.intro .content p {
  padding: 0 3em;
}

.intro .content div {
  padding: 1em;
}

.intro .content div:nth-child(odd) {
  background: #E1F1FB;
}

.intro .content div:nth-child(even) {
  background: #CCEDFF;
}

.intro .content span {
  color: #142850;
  font-weight: 700;
}

.intro .semiCircle-btn {
  position: fixed;
}

footer.white {
  line-height: 12vh;
  background: #fff;
}

footer {
  position: fixed;
  z-index: 999;
  height: 12vh;
  background: #4D7791;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}

footer div.skip {
  background: none;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

footer div.skip a {
  text-decoration: underline;
  font-style: italic;
}

footer ul {
  background: none;
  text-align: center;
  vertical-align: middle;
}

footer p {
  color: #fff;
}

footer ul li {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin: .5em;
}

footer ul li a {
  display: block;
  opacity: .5;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

footer ul li a:hover {
  opacity: .8;
}

footer .currentCircle {
  opacity: 1;
}

#intro3 .legend {
  width: 20em;
  position: static;
  float: none;
  margin: 0 auto;
}

#intro3 .legend li span {
  color: #666666;
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
}

#intro3 .legend li span .bold {
  font-weight: 700;
}

.wrapper {
  width: 20em;
  margin: 0 auto;
}

.start-btn {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 8vh;
  line-height: 8vh;
  padding: 2vh;
  text-align: center;
}

.start-btn .ui-btn {
  margin: 0 auto;
  width: 80%;
  max-width: 480px;
  background: -webkit-radial-gradient(center center, circle farthest-corner, #4d7785 0%, #24426b 74.2%, #142850 100%);
  background: radial-gradient(circle farthest-corner at center center, #4d7785 0%, #24426b 74.2%, #142850 100%);
  color: #fff;
  height: 8vh;
  line-height: 8vh;
}

@media (min-width: 800px) {
  body {
    background: url(../images/Bg_horizontal.jpg) top left no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .ui-panel-wrapper {
    background: none;
  }
  .home .ui-panel-wrapper, .intro .ui-panel-wrapper {
    margin-top: 0vh;
    padding-top: 0vh;
  }
  .ui-header {
    background: url(../images/Header_Image_lg.jpg) top left no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .fish-image {
    position: relative;
    background: none;
    height: 450px;
    overflow: hidden;
    margin: 6vh auto;
    width: 800px;
    box-shadow: 12px 0 15px -4px rgba(0, 0, 0, 0.2), -12px 0 8px -4px rgba(0, 0, 0, 0.2);
  }
  .fish-image img {
    position: absolute;
    bottom: 0;
  }
  .side-button {
    position: absolute;
    right: 0;
  }
  .side-button span {
    border-radius: 90px 90px 90px 90px;
    padding: 0em 0.75em;
  }
  .logo-head {
    width: 30%;
    max-width: 300px;
  }
  .intro .ui-header {
    position: absolute;
  }
  .intro .content {
    margin-top: 0vh;
  }
  .intro .ui-page-header-fixed {
    margin-top: -78px;
  }
  .semiCircle-btn {
    margin-top: 0vh;
  }
  .ui-listview > li > a.ui-btn {
    -webkit-transition: .3s;
            transition: .3s;
  }
  .ui-listview > li > a.ui-btn:hover {
    background: #CCEDFF;
    color: #142850;
  }
  .ui-listview > .ui-li-has-thumb > .ui-btn:hover,
  .ui-listview > .ui-li-static.ui-li-has-thumb:hover {
    background: #CCEDFF;
  }
  .ui-listview > .ui-li-has-thumb > .ui-btn:hover .fish-name,
  .ui-listview > .ui-li-static.ui-li-has-thumb:hover .fish-name {
    color: #142850;
  }
  .fish-latin-name {
    font-size: 1em;
  }
  .ui-title.fish-name-long {
    font-size: 1em;
  }
  .ui-header {
    height: 8vh;
    line-height: 8vh;
  }
  .ui-btn {
    height: 8vh;
    line-height: 8vh;
  }
  .semiCircle-btn {
    margin-top: 0vh;
  }
  .rrssb-buttons li {
    float: none;
    height: 8vh;
    line-height: 8vh;
  }
  .ui-listview > .ui-li-has-thumb > .ui-btn,
  .ui-listview > .ui-li-static.ui-li-has-thumb {
    height: 8vh;
    line-height: 8vh;
  }
  #directory form {
    height: 8vh;
  }
  #directory form .ui-input-search input {
    height: 4vh;
  }
  .menu-title {
    height: 8vh;
    line-height: 8vh;
  }
  .menu a.ui-btn {
    height: 8vh;
    line-height: 8vh;
  }
  .menu a.ui-btn:hover {
    background: #CCEDFF;
    color: #142850;
    border-bottom: 2px solid #142850;
  }
  .intro {
    margin-bottom: 8vh;
  }
  footer.white {
    line-height: 8vh;
  }
  footer {
    height: 8vh;
  }
  .start-btn {
    height: 4vh;
    line-height: 4vh;
  }
  .start-btn .ui-btn {
    height: 4vh;
    line-height: 4vh;
  }
}