/* 200331 */
/* Shorthand
-----------------------------------------------------------------------------------------------------------------
background: bg-color    bg-image position/bg-size bg-repeat bg-origin   bg-clip    bg-attachment initial|inherit; 
default:    transparent none        0% 0%/auto    repeat    padding-box border-box scroll          
Multiple background images: first image is closest to viewer.
-----------------------------------------------------------------------------------------------------------------
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
default:   none 0        ease            0     1               normal    none      running  
----------------------------------------------------------------------------------------------
transition: property duration timing-function delay|initial|inherit; 
default: 	 all      0s       ease            0s
-------------------------------------------------------------------- */
/* Colors
-------------------------------------------------------
Primary    #ff6f00 Amber   #ffa040 light   #c43e00 dark
Secondary  #9e9e9e Grey    #cfcfcf light   #707070 dark
------------------------------------------------------- */
/*
    When setting the primary font stack, apply it to the Pure grid units along
    with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
    specific font stacks to ensure the greatest OS/browser compatibility.
    */
html, button, input, select, textarea, .pure-g [class *="pure-u"] {
  /* Set your content font stack here: */
  font-family: "PT Sans", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Home
================================================== */
.wire {
  position: fixed;
  width: 115%;
  height: 115%;
  background: url(../img/wire_24.png) center/contain no-repeat;
  animation-name: stretch;
  animation-duration: 180s; 
  animation-timing-function: ease; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes stretch {
  0% {transform: scale(1) rotate(0deg)}
  100% {transform: scale(3) rotate(360deg)}
}
.gradient {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgb(192, 62, 0, .8), rgb(255, 160, 64, .85), rgb(255, 102, 0, .95));
  background-size: 600% 100%;
  animation: gradient 15s linear infinite alternate;
}
@keyframes gradient {
  0% {background-position: 0%}
  100% {background-position: 100%}
}
#home {
  display: table;
  position:absolute;
  width:100%;
  height:100%;
  line-height: 1.6em;
  text-align: center;  
}
#home .content {
  display: table-cell;
  vertical-align: middle;
  padding-bottom: 5%;
}
#home .logo {
  width: 100px;
  height: 100px;
  padding: 30px;
  background-color: #fff;
  transition: 1s;
}
#home p {
  margin: .5em 30px 0;
  color: #c43e00;
  opacity: .5;
  font-size: 1.6875em;
  transition: 1s;
}
#home p .cap {display:block}
#home p .pipe {display:none}
#home p.location {text-transform: lowercase;}
#home p.contact {opacity: .8; font-size: 1.3125em;}
#home a {color: #fff;text-decoration: none;}
#home a:link, a:visited {opacity:.8}
#home a:hover {opacity:1}
#home a:active {opacity:.5}

/* Pins
================================================== */
#pins {
  margin: 0 auto;
  padding: 1em;
  max-width: 960px;
  line-height: 1.6em
}
#pins a {
  color: #707070;
	text-decoration: none;
  border-bottom: 1px dotted #707070;
}
#pins a:link, a:visited {color: #707070;}
#pins a:hover {color: #9e9e9e;}
#pins a:active {color: #cfcfcf;}

#pins header {color: #707070;}
#pins header .address .logo {
  width: 100px;
  height: 100px;
  float:left;
  padding-right:1.5em
}
#pins header .address p {
  margin-top:0;
  padding-top:1em;
  font-size:.875em;
  line-height: 1.4rem
}
#pins h1, #pins h2 {
  padding-top:1em;
  border-top:1px solid #cfcfcf;
  font-weight:normal;
}
#pins h1 {margin-bottom: 0;}
#pins h2 {color: #707070; clear:both}
#pins ul {
  list-style-type: none;
  margin: 0  0 1.5em;
  padding: 0;
}
#pins ul li {text-align: right}
#pins ul li span {float: left; font-weight: bold}
#pins form, #pins table, #pins select, #pins input {
  margin-bottom:1em;
  height:auto
}
#pins p.desc-label {font-size:inherit; font-weight: bold}

/* Error Pages
================================================== */
#servererror {
  position:absolute;
  width:100%;
  height:100%;
  line-height: 1.6em;
  background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50% 0;
  color:#fff
}
#servererror .content {
  padding: 1em;
  text-align: right;
  transition: 1s;
}
#servererror .logo {
  width: 75px;
  height: 75px;
  padding: 22.5px;
  background-color: #fff;
  transition: 1s;
}
#servererror .server-msg {
  padding:22.5px;
  margin-top:1em;
  text-align: left;
}
#servererror h1 {
  margin:0;
  font-size: 3em;
  font-weight: 400;
  line-height: 1em;
}
#servererror.notfound { background-image: url(../img/rb050916_0073_prairiedogs.jpg); }
#servererror.notfound .server-msg {background-color: #707070;}
#servererror.forbid { background-image: url(../img/rb071122_3055_henryforbids.jpg); }
#servererror.forbid .server-msg {background-color: #ff6f00;}


/* -- Responsive Styles (Media Queries) -------------------------------------
========================================================================== */
/* >=368px */
@media (min-width: 23em) {
  #pins {padding: 2em;}
  #pins header .logo {padding-right:2em}
  #pins header .address p {font-size:1em;}
  #servererror .content, #servererror .server-msg {padding: 30px;}
}

/* >=408px */
@media (min-width: 25.5em) {
  #home p {margin:1em 30px 0;}
}

/* sm >=568px */
@media (min-width: 35.5em) {
  #servererror .content {margin:0 10%; padding:3em}
  #servererror .logo {width: 100px; height: 100px; padding: 30px;}
}

/* md >=768px */
@media (min-width: 48em) { 
  #pins header {position: relative}
  #pins .address {width:47%;}
  #pins .pgtitle {
    position:absolute;
    top:0;
    right:0;
    width:47%;
    text-align: right
  }
  #pins h1 {
    padding:0;
    border:none
  }
  #pins ul {
    float:left;
    width:28%;
    padding-right:8%;
 }
  #pins ul:last-of-type {
    padding-right:0;
 }
  #home p .cap {display:inline}
  #home p .pipe {display:inline;padding:0 .1em;color:#fff;opacity: .35}
}

/* >=832px */
@media (min-width: 52em) {
}

/* lg >=960 */
@media (min-width: 60em) {
}

/* lg >=1024px */
@media (min-width: 64em) {
}

/* >=1280px */
@media (min-width: 80em) {
  #servererror .content {margin:0 20%}
}

/* >=1440px */
@media (min-width: 90em) {
  #home .logo {
    width: 120px;
    height: 120px;
    padding: 36px;
}
  #home p {
    margin: 1.2em 30px 0;
    font-size: 2.025em;
}
  #home p.contact {font-size: 1.575em;}
  #servererror .content {margin:0 30%}
}