body{
  background-color: white;
  font-family: 'Source Sans Pro';
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sourcesanspro.ttf');
}

::selection {
  background-color: #B0D6FD !important;
  color: #2a2a2a !important;
}
a, a:hover {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  text-decoration:none;
  background:transparent;
  outline: 0;
}
.navbar {
   padding: 5px 5px;
}
.centered {
   text-align: center;
}
.info{        
  display: none;
  bottom: 30px;
  text-shadow: 0 2px 5px #000;
  color: #fff;
  position: relative;
  z-index: 100;
}
.logo {
  position: absolute;
  width: 100% !important;
  text-align: center;
  background-color: #fff;
  user-select: none;
  font-size: 30px;
  margin: -5px 0px 0px 0px !important;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  color: #939393;
  padding-bottom: 21px;
  letter-spacing: -2px;
  text-shadow: none;
 }
.logo a {
  color: #888888;
  text-decoration: none;
}
.logo a:hover{
  text-decoration: none;
  color: #888888;
}
.logoorange {color: #F7931E;}
.logogreen {color: #50b536;}

/* share options */
#bottom-share img{
  vertical-align: middle;
  margin-top: 25%;
}
#bottom-share .facebookshare {
  background: #3B5998;
  cursor: pointer;
  width:50px;
  height:50px;
  text-align: center;
}
#bottom-share .twittershare {
  background: #2599DA;
  cursor: pointer;
  width:50px;
  height:50px;
  text-align: center;
}
#bottom-share .camioshare {
  background: #34C96A;
  cursor: pointer;
  width:50px;
  height:50px;
  text-align: center;
}
#bottom-share .camioshare img{
  width: 20px;
}
.facebookshare,
.twittershare,
.camioshare{
  display:inline-block;
}
.date {margin: 0; font-size: 12px; color: #666}
#header {
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 5px #dadada;
  text-align: center;
}
#header img{
  width:120px;
}

.header-controls a {
  color: #3ac162;
  background: #F6FFF9;
  border-radius: 5px;
  text-shadow: none;
  cursor: pointer;
  font-weight: 500;
  padding: 8px 10px !important;
  border: 2px solid #3ac162;
  -webkit-transition: 0.1s all;
  -moz-transition: 0.1s all;
  -o-transition: 0.1s all;
  margin-left: 10px;   
}
.header-controls a:hover{
  color: #3ac162 !important;
  background: #E6FFE9 !important;
}
#main {
  padding-top: 40px;
  padding-left: 0;
  padding-right: 0;
}

#bottom-share {
  width: 100%;
  bottom: 0;
  z-index: 10;
  text-align: center;
}
#bottom-share a{
  width: 60px;
  margin-left: -30px;
  height: 60px;
  position: absolute;
}
#bottom-share .share-item {
  text-align: center;
  opacity: 1;
  margin-bottom: 10px;
  -webkit-animation: all .3s ease;
  animation: all .3s ease;
  border-radius: 50%;
}
#bottom-share .share-item:hover {
  opacity:.89;
}
.share-item .facebook {
  color: #3A589B;
}
.share-item .twitter {
  color: #598DCA;
}
.share-item .link {
  color: #F67746;
}
.share-item .link img {
  width: 30px;
}
.navbar>.container .logo.navbar-brand{
  left: 0 !important;
}
#viewer {
  max-width: 100%;
  text-align: center;
  padding-top: 40px;
}
#viewer-inner {
  display: inline-block;
  position: relative;
  font-size: 0;
  line-height: 0;
}
#unmute {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  padding: 5px 10px;
  backrgound-color: rgba(255,255,255,0.3);
  color: black;
  font-size: 14px;
}
#unmute:not(.muted) .glyphicon-volume-up {
  display:none;
}
#unmute.muted .glyphicon-volume-off {
  display:none;
}
.camio-loader {
  position: absolute;
  z-index: 100;
  margin: 100px auto;
  width: 100%;
  height: 100px;
  text-align: center;
}
.loader-inner {
  width: 100px;
  height: 100px;
  text-align: center;
  margin: auto;
}
#viewer img#still-images {
  display: none;
  position: relative;
  left: 0;
  top: 0;
}
#viewer video#video-players {
  display: none;
  background-color: #000;
  position: relative;
  left: 0;
  top: 0;
}

#camio-controls {
  display: block;
  margin: 0 auto 0 auto;
  white-space: nowrap;  
}
#info{
  bottom: 40px;
  color: #fff;
  opacity:.8;
  text-shadow: 0 2px 3px rgba(42, 42, 42, 0.55);
  position: relative;
  z-index: 1000;
}
#info a {
  color: #fff;
  text-decoration: none;
}
#camio-controls .progress-container {
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
  height: 15px;
  background-color: #dadada;
  text-align: left;
}
#camio-controls .progress-inner {
  display: inline-block;
  background-color: #2a2a2a;
  text-align:left;
  padding:0;
  height: 15px;
}
#viewer .play, #viewer .pause {
  display: none;
  position: absolute;
  z-index: 100;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 60px;
}
#viewer:not(.playing) .play {
  visibility: false;
}
#viewer.playing .play {
  visibility: true;
}
#viewer .play {
  opacity: 0.8;
  background-image: url('/svg/webapp-expand.svg');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 40px;
}
#viewer .pause {
  opacity: 0.8;
  background-image: url('/svg/webapp-expandpause.svg');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 40px;
}
#viewer .watermark{
  background: url("/svg/webapp-watermark.svg") no-repeat;
  background-size: 100% 60%;
  top: 0;
  right: 0;
  position: absolute;
  width: 80px;
  z-index: 1000;
  height: 35px;
  opacity: 0.8;
  text-decoration: none;
}
@media (min-width: 768px){
  .container {
     width: 100%;
  }
}
@media (max-width: 422px){
   #viewer .watermark {
     background:transparent;
  }
}
.popover-title {
  text-align: center;
}
.attribution {
  margin-top:10px;
}
.attribution p {
  margin:0px;
}