/* fonts and gridlover stuff */

html, .root {
  font-size: 18px;
  line-height: 28px;
}
body, .article, .form-control {
  font-family: 'Rubik', sans-serif;
  font-size: 1em;
  line-height: 1.55555556em;
  margin: auto;
}
h1, .h1 {
  font-family: 'Trirong', serif;
  font-size: 4.22222222em;
  line-height: 1.10526316em;
  margin-top: 0.36842105em;
  margin-bottom: 0.7368421em;
}
h2, .h2 {
  font-family: 'Trirong', serif;
  font-size: 2.61111111em;
  line-height: 1.19148936em;
  margin-top: 0.59574468em;
  margin-bottom: 0.59574468em;
}
h3, .h3 {
  font-family: 'Trirong', serif;
  font-size: 1.61111111em;
  line-height: 0.96551724em;
  margin-top: 0.96551724em;
  margin-bottom: 0.96551724em;
}
h4, .h4 {
  font-family: 'Trirong', serif;
  font-size: 1em;
  line-height: 1.55555556em;
  margin-top: 1.55555556em;
  margin-bottom: 1.55555556em;
}
h5, .h5 {
  font-family: 'Trirong', serif;
  font-size: 1em;
  line-height: 1.55555556em;
  margin-top: 1.55555556em;
  margin-bottom: 1.55555556em;
}
p, ul, ol, pre, table, blockquote {
  margin-top: 0em;
  margin-bottom: 1.55555556em;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}

footer { font-size: .8em;}
.navbar {font-family: 'Trirong', serif;}

/* gridlover alignment */
hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}
a, b, i, strong, em, small, code {
  line-height: 0;
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

.container-fluid {padding: 0;}

/* links */

a {
	color: #A6423A;
	font-weight: bold;
}

a:hover, a:active, a:focus {
	color: #A6423A;
	text-decoration: underline;
}

/* jumbotron */

.jumbotron {
    margin-bottom: 0px;
}

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
}

#glitter-background {
	background: #000 url("../img/gold-glitter-compressed.gif") no-repeat;
	background-size: cover;
	background-position: 0 100%;
}

.viz-logo {display: inline-block; }

.viz-logo canvas {background: transparent;}

.viz-wrapper {text-align: center;}

/* nav */

.navbar {
	background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url("../img/gold-glitter-compressed.gif") no-repeat;
	background-size: 100%;
	background-position: 0 -100%;
	border-radius: 0px;
	margin-top: -52px;
}

.navbar.affix {
	background-position: 0 100%;
    top: 0;
    margin-top: 0px;
    width: 100%;
    z-index: 1;
}

.navbar-brand {
	color: #ffffff;
	font-weight: normal;
  padding-left: 0px;
}

#spinning-diamond {display: inline-block; width: 85px; position: relative; top: -10px; left: 0px;}

#spinning-diamond-first-position {display: inline-block; width: 135px; position: relative; top: -400px; left: 200px;}

#spinning-diamond-first-position img, #spinning-diamond img {max-width: 100%;}

.secondary-page-container > #nav-wrapper {display: inline-block; margin-bottom: 100px;}

/*social buttons*/

#social-button-group {margin-top: 5px; padding-right: 0px;}

.social-button {width: 40px; height: 40px; background-size: 40px 40px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-right: 5px;}

.social-button a {height: inherit; width: inherit;}

.nav > .social-button > a:hover, .nav > .social-button > a:focus {background-color: transparent;}

#facebook {background-image: url("../img/fb/fb-icon-white.png")}

#instagram {background-image: url("../img/ig/instagram-icon-white.png")}

#twitter {background-image: url("../img/twitter/twitter-icon-white.png")}

#linkedin {background-image: url("../img/linkedin/linkedin-icon-white.png")}

#facebook:hover {background-image: url("../img/fb/fb-icon-full.png")}

#instagram:hover {background-image: url("../img/ig/instagram-icon-full.png")}

#twitter:hover {background-image: url("../img/twitter/twitter-icon-full.png")}

#linkedin:hover {background-image: url("../img/linkedin/linkedin-icon-full.png")}

/*emoji animations*/

/*whoa*/

#animated-emoji-wrapper {display: block; height: 40px; width: 40px;}

.whoa-emoji {
  -webkit-animation: whoa 3000ms linear infinite;
  -moz-animation: whoa 3000ms linear infinite;
  -ms-animation: whoa 3000ms linear infinite;
  animation: whoa 3000ms linear infinite;
}

@-ms-keyframes whoa {
  from {
    font-size: 18px;
  }
  50% {
    font-size: 36px;
  }
  to {
    font-size: 18px;
  }
}

@-moz-keyframes whoa {
  from {
    font-size: 18px;
  }
  50% {
    font-size: 36px;
  }
  to {
    font-size: 18px;
  }
}

@-webkit-keyframes whoa {
  from {
    font-size: 18px;
  }
  50% {
    font-size: 36px;
  }
  to {
    font-size: 18px;
  }
}

@keyframes whoa {
  from {
    font-size: 18px;
  }
  50% {
    font-size: 36px;
  }
  to {
    font-size: 18px;
  }
}

/*spin*/

.spinning-emoji {
  animation-duration: 500ms;
  animation-name: spin;
  animation-iteration-count: infinite;
  width: 100px;
  font-size: 100px;
  line-height: 100px;
  margin: 0 auto;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

/*site lead*/

#site-lead {margin-top: 30px;}

.pull-quote {padding: 20px; border-left: 5px #A6423A solid;}

#thank-you {margin-bottom: 100px;}

/*bandcamp players*/

.bandcamp-players {text-align: center;}

.bandcamp-players > iframe {max-width: 100%;}

/*contact */

.contact {
  background-color: rgba(166, 66, 58, 0.8); 
  color: #fff;
}

.contact:hover {background-color: rgba(166, 66, 58,1);}

#contact-bottom {text-decoration: none;}

#page-end {margin-bottom: 50px;}

/*footer*/

footer {background-color: #111; color: #fff; padding: 20px 10px 0px 10px;}

.lets-work-together, .lets-work-together:active, .lets-work-together:visited, .lets-work-together:focus {color: #fff; text-decoration: none;}

.lets-work-together:hover {color: #fff; text-decoration: underline;}

.lets-work-wrapper {text-align: center; padding: 50px 0px 20px 0px;}

/*forms*/

.form-group {margin-right: 5px; margin-left: 5px;}

.form-control {margin-bottom: 20px; height: inherit;}

.btn-secondary {color: rgba(166, 66, 58, 0.8); font-weight: bold;}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited, .btn-secondary:focus {color: rgb(166, 66, 58);}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #social-button-group {padding-right: 10px;}
  .navbar-brand {padding-left: 15px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}