@-webkit-keyframes aniUp{from{background-position:0px 0px}to{background-position:0px 1080px}}
@-moz-keyframes aniUp{from{background-position:0px 0px}to{background-position:0px 1080px}}
@-o-keyframes aniUp{from{background-position:0px 0px}to{background-position:0px 1080px}}
@keyframes aniUp{from{background-position:0px 0px}to{background-position:0px 1080px}}



/*
 * @Defaults & Resets
 */

html,body,div,ul,li,img{
  padding: 0;
  margin: 0;
  border: 0;
}

html,body{
  width: 100%;
  height: 100%;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  background: #141f2d;
/*  overflow: hidden; */
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
}

strong {
  font-weight:500;
}

h3 strong, h4 strong  {
  font-weight:500;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: 100;
}

h1 {
  font-size: 3.4em;
}

h2 {
  font-size: 2.8em;
}

h3 {
  font-size: 2.2em;
  font-style: italic;
  text-align: justify;
  text-overflow: hyphenate;
}

h4 {
  font-size: 1.6em;
  font-style: italic;
  text-overflow: hyphenate;
}

a, button {
  transition: background, color, border;
  transition-duration: 0.1s;
}

a { /* border vs underline is optional. border can look nice and has a few more options, but underline can be used in conjunction with a border.  */
  display: inline-block;
  text-decoration: none;
  color: rgba(102,204,255,1);
  border-bottom: dashed 1px rgba(102,204,255,0);
}

a:hover {
  color: rgba(122,224,255,1);
  border-color: rgba(122,224,255,1); 
}

a:active {
  color: rgba(255,255,255,1);
  border-color: rgba(255,255,255,1);
}

a:visited {
/*  color: purple;*/
/*  border-color: purple; */
}



/*
 * @Helpers
 */
 
.no-bullet {
  list-style: none;
}

.no-select{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.no-resize {
  -webkit-resize: none;
  -moz-resize: none;
  -ms-resize: none;
  -o-resize: none;
  resize: none;
}

.left { /* did i tell you the one about the horse who went into the bar? */
  float: left;
}

.right { /* the bartender asked: "why the long face?" */
  float: right;
}

.center { /* can't be used on inline elements */
  margin-left: auto;
  margin-right: auto;
}

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/* For IE 6/7 only. Include this rule to trigger hasLayout and contain floats. */
.clearfix {
  *zoom: 1;
}

.max-x { /* sets & centers to specified max width, allows downscale */
  max-width: 760px;
}

.pad-x { /* consistent horizontal padding */
  padding-left: 1em;
  padding-right: 1em;
}

.pad-y { /* consistent vertical padding  */
  padding-top: 1em;
  padding-bottom: 1em;
}

.mrg-x { /* margin x */
  margin-left: 1em;
  margin-right: 1em;
}

.mrg-y { /* margin x */
  margin-top: 1em;
  margin-bottom: 1em;
}

.col_x2 .col {
  width: 100%;
  margin-bottom: 10px;
}
.col_x2 .col:last-child {
  margin: 0;
}

/*
 * @Custom site styles
 */

/* -- Content -- */

#webrew_spinniness {
  position: relative;
  margin: 0 auto;
  z-index: 10; 
/*
  height: 40%;
  text-align:center;
 */
}


#webrew_spinniness h3 {
  text-align: center;
}

.list-column {
  width:90%;
  text-align: left;
  margin: 2em auto;
}

.list-column li {
  display: block;
  padding: 0 20px;
}

input[type="text"], textarea {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 1em;
  padding: 0.4em 20px;
  color: #fff;
  background: rgba(10,15,30,0.6);
  border: 0;
}

 button, .slider-ui a {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 1em;
  padding: 0.4em 20px;
  color: #fff;
  background: rgba(10,15,30,0);
  color: rgba(255,255,255,0.6);
  border: 0;
  cursor: pointer;
  display: inline-block;
}
.slider-ui a {
  padding: 20px 0 0;
}
 button:hover, button.active, .slider-ui a:hover, .slider-ui a.active {
  background: rgba(10,15,30,0.4);
  color: rgba(255,255,255,1);
}
 button:active, .slider-ui a:active {
  background: rgba(10,15,30,0.8);
  color: rgba(255,255,255,1);
}

.latest-content label, .latest-content input[type="text"], .latest-content textarea {
  display: block;
  width: 100%;
}

.latest-content h3, .latest-content h4, .latest-content p, .latest-content label {
  padding-left: 20px;
  padding-right: 20px;
}

.latest-content .col_x2, .latest-content textarea {
  margin-bottom:1em;
}

.latest-content textarea {
  height: 120px;
}

.send_message {
  background: rgba(10,15,30,0);
  display: block;
  width: 100%;
  padding: 1em;
  margin-bottom: 1em;
}
.send_message:hover {
  background: rgba(10,15,30,0.4);
}
.send_message:active {
  background: rgba(10,15,30,0.6);
}
.send_message .fa {
  margin-left: 10px;
}



/* -- @UI -- */

.slider-ui {
  text-align: center;
  margin-bottom:2em;
}
.slider-ui button, .slider-ui a {
  text-align: center;
  height: 90px;
  width: 90px;
  margin:10px;
  padding: 1em auto;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.slider-ui .fa {
  display: block;
  font-size: 1.6em;
  margin-bottom: 0;
}

.logo_webrew{
  background: none;
  position: absolute;
  top: 0;
}

.logo_webrew img{
/*
  width: 600px;
  height: 180px;
*/
  max-width: 600px;
  max-height: 180px;
  opacity: 0;
  z-index: 1;
  position: absolute;
}

/*
.logo_webrew_b{
  background: none;
}
.logo_webrew_b img{
  width: 660px;
  height: 182px;
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  position: relative;
}
*/
#webrew_emblem {
  position: relative;
  margin: 0 auto;
  display: block;
  opacity: 0;
  padding: 2em 0;
}
#webrew_emblem img{
  margin: 0 auto;
  display: block;
  width: 100px;
}


/* -- Backgrounds -- */

.stars{
  width: 100%;
  height: 100%;
  position: fixed;
  
  top: -1080px;
  left: -1920px;
  
  z-index: -1;
}

.stars li div{
  width: 5760px;
  height: 3240px;
  /* 
  width: 1920px;
  height: 1080px;
  */
  background-repeat: repeat;
  background-position: 0px 0px;
  position: relative;
}

.stars_bg{
  background-image: url("/img/bg/stars_bg.png");
/*  animation: aniUp 300s linear infinite;*/
}

.stars_1{
  background-image: url("/img/bg/stars_1.png");
  -webkit-animation: aniUp 300s linear infinite;
  -moz-animation: aniUp 300s linear infinite;
  -o-animation: aniUp 300s linear infinite;
  animation: aniUp 300s linear infinite;
}
.stars_2{
  background-image: url("/img/bg/stars_2.png");
  -webkit-animation: aniUp 240s linear infinite;
  -moz-animation: aniUp 240s linear infinite;
  -o-animation: aniUp 240s linear infinite;
  animation: aniUp 240s linear infinite;
}
.stars_3{
  background-image: url("/img/bg/stars_3.png");
  -webkit-animation: aniUp 180s linear infinite;
  -moz-animation: aniUp 180s linear infinite;
  -o-animation: aniUp 180s linear infinite;
  animation: aniUp 180s linear infinite;
}
.stars_4{
  background-image: url("/img/bg/stars_4.png");
  -webkit-animation: aniUp 120s linear infinite;
  -moz-animation: aniUp 120s linear infinite;
  -o-animation: aniUp 120s linear infinite;
  animation: aniUp 120s linear infinite;
}

.stars_trail { /* only use this element during transitions */
  background-image: url("/img/stars_trails_temp.png");
}

.stars_trail.active { /* activate the animation so it doesn't use too much resource */
  -webkit-animation: aniUp 1s linear infinite;
  -moz-animation: aniUp 1s linear infinite;
  -o-animation: aniUp 1s linear infinite;
  animation: aniUp 1s linear infinite;
}



/*
.stars_field{
  background-image: url("/img/stars_field.png");
  background-position: center center;
}

.stars_temp{
  background-image: url("/img/stars_temp.png");
  animation: aniUp 550s linear infinite;
}
*/











/*
 * @Plugins
 */

/* -- @Slick Slider (@Carousel) -- */
/* http://kenwheeler.github.io/slick/ */

.slick-slider{
  position: relative;
  display: block;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list{
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus{
  outline: none;
}

.slick-list.dragging{
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,.slick-slider .slick-list{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track{
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,.slick-track:after{
  display: table;
  content: '';
}

.slick-track:after{
  clear: both;
}

.slick-loading .slick-track{
  visibility: hidden;
}

.slick-slide{
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide{
  float: right;
}

.slick-slide img{
  display: block;
}

.slick-slide.slick-loading img{
  display: none;
}

.slick-slide.dragging img{
  pointer-events: none;
}

.slick-initialized .slick-slide{
  display: block;
}

.slick-loading .slick-slide{
  visibility: hidden;
}

.slick-vertical .slick-slide{
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-track {
  overflow: hidden;
}


/* -- @Your plugin here! -- */




/*
 * @Breakpoints
 */
 
/* -- Mobile to Tablet breakpoint -- */ 
@media only screen and (min-width: 480px) { 
/*
  body {
    font-size: 18px;
  }
*/
  .list-column li {
    width: 50%;
    float: left;
    padding-right:10px;
  }

  .slider-ui a {
    padding: 25px 0 0;
  }
  
  .slider-ui button, .slider-ui a {
    height: 100px;
    width: 100px;
  }
  
  .col_x2 .col {
    width: 45%;
    margin: 0;
  }
  
/*
  #webrew_emblem img{
    padding: 3em 0;
  }
  
  #webrew_emblem img{
    width: auto;
  }
*/
}


/* -- Tablet to Desktop breakpoint -- */
@media only screen and (min-width: 1000px) { 
  
}