/* GLOBAL STYLES
-------------------------------------------------- */
* {


  font-family: 'Droid Sans', sans-serif;
   box-sizing: border-box;

}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 25px;
    border-color: gray;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}
.social {
  margin-right: 20px;
}
.social a {
  padding: 0 0  !important;
  display: inline !important;
}
.social img {
  height:30px;
  margin-top:10px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  transition: transform 0.2s ease;
}
.social img:hover, img:focus {
  opacity: 1;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(5deg);
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 95vh;
  min-height:500px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 1;
/*  top:50%;
  transform: translateY(-60%);
-webkit-transform: translateY(-60%);*/
}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 95vh;
  position:relative;
  min-height:500px;
}

.carousel-caption img {
  min-width:50%;
}

/* Featurettes
------------------------- */
#intro {
  background-color: rgb(0, 92, 75);
  position:relative;
  z-index: 3;
}
#intro:before {
    background: inherit;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
    -webkit-backface-visibility: hidden; // for Chrome Windows
    top: 0;
    transform: skewY(-2.5deg);
    transform-origin: 0
}
.intro-description {
  text-align: center;
  margin: 2em 0;
  color:white;
  position: relative;
  z-index: 5;
}
.intro-description img, .intro-description a {
  display: none;
}
.intro-description span{
  color:rgba(255, 255, 255, 0.6);
}
.intro-description .lead {
  padding: 2em 0;
}
.featurette-divider {
  margin: 60px 0; /* Space out the Bootstrap <hr> more */
  height: 20px;
  border: 0;
  background-image: url("../images/pawprint_loop.png");
  background-repeat:repeat-x;
  background-size: auto 40px;
  background-position: top;
  position:relative;
  z-index: 1;
}

.featurette-divider:before {
  position: absolute;
  top: 0;
  left:0;
  right:0;
  background-color: white;
  z-index: 10;
  content: '';
  display: block;
  height:100%;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
  background: -webkit-gradient(left top, right top, color-stop(10%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,0)), color-stop(90%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
  background: -o-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
  background: -ms-linear-gradient(left, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
  background: linear-gradient(to right, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 90%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
.featurette-divider-invisible {
  margin-top: 30px;
}
/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.featurette .lead {
  margin-bottom: 40px;
}
/*
.generic-background {
  background-image: url('../images/furum_website-tile.png');
  background-attachment:fixed;
}*/
.center-buttons {
text-align: center;
}
.center-buttons a {
  margin-left: 10px;
  padding-left: 40px;
  padding-right: 40px;
}

.btn-long {
  padding: 10px 36px;
}

/* flip card
------------------------- */

#event-highlight .lead {
  margin-bottom: 15px;
}

.card {
    margin-top: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 150px;
    opacity: 0.85;
}
.front,
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    border-radius: 5px;
}

.front {
    transform: rotateY(0deg);
    background: -webkit-linear-gradient(top left, #3c8371, #009970);
    background: linear-gradient(to bottom right, #3c8371, #009970);
    text-align:center;
    padding: 30px;
    display: table-cell;
    vertical-align: middle;
}
.front h2 {
  display: inline-block;
  width:80%;
  font-size: 20px;
  color: white;
  margin-top: 30px;
}
.back {
    background: -webkit-linear-gradient(top left, #009970, #84DD63);
    background: linear-gradient(to bottom right, #009970, #84DD63);
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    padding: 10px 15px;
    color: #fff;
}
.back .lead {
    font-size: 18px;
}
.card:hover .front {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
}
.card:hover .back {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
}

/* link-header
------------------------- */
#link-header {
  height: 150px;
  background-color: rgb(60, 131, 113);
}
.link-title {
  margin-top: 55px;
}
.link-title h1 {
  font-size:40px;
  font-weight:bold;
  color:#FFFFFF;
  padding: auto;
  text-align:center;
  letter-spacing: 0.6vw;
}

/* FAQ */
.faq-caret {
  float:right;
}
.question {
  cursor: pointer;
  border-radius:5px;
}
.question h3 {
  padding: 10px;
  margin-left:5px;
  font-size: 20px;
}
.answer {
  display: none;
  border-radius:5px;
  background-color:#FFFFFF
}
.answer p {
  padding: 10px;
  margin-left:5px;
}
.answer span {
  font-weight:bold;
}
.background-gradient {
background-color: rgb(60, 131, 113);
}
.background-gradient h3 {
    color: #FFFFFF;
}
.shadow {
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
}
#committee {
  text-align:center;
}
#committee .group-center {
	display:inline-block;
}
#committee .group-center img {
	width:200px;
}
.help-block {
  color:red;
}




/* Footer
------------------------- */
.above-footer {
  margin-bottom:60px;
}

#footer {
  text-align: center;
}

#footer p {
  width:100%;
}
#footer a {
    color:rgba(255, 255, 255, 0.6);
    padding: 0 5px;
}
#footer a:focus, a:hover {
    color: grey;
    text-decoration: underline;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  #link-header {
    height: 250px;
  }
  .link-title {
    margin-top:110px;
  }
  .featurette-divider {
    margin: 80px 0; /* Space out the Bootstrap <hr> more */
  }
  .featurette-divider-invisible {
    margin-top: 80px;
  }

  .carousel-caption img {
    width:300px;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

#glyphicon {
  position:fixed;
  bottom: 30px;
  right: 40px;
  padding:10px;
  width:64px;
  border-radius:5px;
  background: rgba(211, 211, 211, 0.35);
  text-align:center;
  z-index:9999;
}

#glyphicon a {
  text-align:center;
  color:rgba(211, 211, 211, 0.95);
  font-size:40px;
}

/* gallery */
#gallery p {
  text-align:center;
  }

#gallery img {
   width:200px;
   margin: 2px;
}




@media (max-width: 992px) {
  .question h3 {
    padding: 10px 5px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
  }
}

@media (min-width:992px) {
  .carousel-caption img,   .carousel-caption a {
    display: none;
  }
  .intro-description img,  .intro-description a {
    display:block;
  }
  .intro-description a {
    width:250px;
  }
}


@media (max-width: 768px) {
  .question h3 {
    font-size: 12px;
  }
  .link-title h1 {
    letter-spacing: 0.2vw;
  }
  .carousel {
    height: 90vh;
  }
  .carousel .item {
    height: 90vh;
  }
  .intro-description .lead {
    padding: 0;
  }
  #glyphicon {
    bottom: 50px;
  }
  #committee .group-center img {
  	width:120px;
  }
  .card {
    height:70px;
    margin-top: 5px;
  }
  .back {
    padding-top: 10px;
  }
  .back .lead {
    font-size: 14px;
  }
  .front {
    padding:10px;
  }
  .front h2 {
    margin-top: 13px;
  }

}

@media (max-width: 1200px) {
  .radio-inline {
    margin-left: 10px;
    display: block;
  }
}

@media (max-width: 410px) {
  .front h2 {
    margin-top: 30px;
  }
  .back .lead {
    font-size: 13px;
  }
  .front {
    padding:10px;
    vertical-align: middle;
  }
  .front h2 {
    margin: 0;
    line-height: 50px;
  }
}


@media (max-width: 350px) {
  .front h2 {
    font-size: 18px;
  }
  .back .lead {
    font-size: 13px;
  }
}

@media (max-width: 435px) {

  #gallery img {

   width:90px;
   }