/*

  Chaos Factory - Site Styles
  
  Version 2.0 - 06/04/2019

 */

/* General */
 
html {
  height: 100%;
}
 
body#Chaosfactory {
  height: 100%;
  font-family: Futura, Futura-Medium, "Futura Medium", "Open Sans", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
  color: #fff;
  text-align: center;
}

body#Chaosfactory:after{
  content:"";
  position:fixed;
  top:0;
  height:100vh;
  left:0;
  right:0;
  z-index:-1;
  background: url("../img/astronomy-dark-evening-2880.jpg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body#Chaosfactory div.page-content {
  background-color: rgba(162, 162, 162, 0.26);
  color: #fff;
  text-align: justify;
}

body#Chaosfactory div#page-footer {
  color: #aaa;
  text-align: left;
  min-height: 70px;
  font-size: 80%;
  padding: 40px 20px 10px 20px;
}

body#Chaosfactory .dropdown-menu {
  margin-top: 7px;
  border-radius: 0;
  background-color: rgba(162, 162, 162, 0.26);
}

body#Chaosfactory a.nav-link,
body#Chaosfactory a.dropdown-item {
  font-size: 140%;
  font-family: "Open Sans Condensed", sans-serif;
  text-transform: uppercase;
  color: #fff;
  padding-right: 20px;
}

body#Chaosfactory a.dropdown-item{
  font-size: 110%;
}
body#Chaosfactory a.dropdown-item:hover {
  background-color: rgba(162, 162, 162, 0.39);
}

body#Chaosfactory #main-menu-toggler {
  color: #fff;
}

body#Chaosfactory #coming-soon-content {
  padding: 50px 0;
}

body#Chaosfactory #nav-logo {
  height: 35px;
}

#Chaosfactory div.news-date {
  font-weight: bold;
  text-align: right;
}

#Chaosfactory div.centered {
  text-align: center;
}

#Chaosfactory .privacy {
  text-align: justify;
}

/* Text and links */

#Chaosfactory a {
  color: #ddd;
}

#Chaosfactory div.heading {
  color: #fff;
  text-align: left;
}

#Chaosfactory h1,
#Chaosfactory h2,
#Chaosfactory h3,
#Chaosfactory h4,
#Chaosfactory h5,
#Chaosfactory h6 {
  text-transform: uppercase;
  font-family: "Open Sans Condensed", sans-serif;
}

#Chaosfactory h1#news-head,
#Chaosfactory h2#news-head,
#Chaosfactory h3#news-head,
#Chaosfactory h4#news-head,
#Chaosfactory h5#news-head,
#Chaosfactory h6#news-head {
  color: #fff;
  background: url("../img/astronomy-dark-evening-2880.jpg") center center;
  padding: 5px 10px;
}

#Chaosfactory h3#news-head {
  font-size: 1.10rem;
}
@media (min-width: 380.00px) {
  #Chaosfactory h3#news-head {
    font-size: 1.50rem;
  }
}
@media (min-width: 575.98px) {
  #Chaosfactory h3#news-head {
    font-size: 1.75rem;
  }
}

#Chaosfactory h1.bold,
#Chaosfactory h2.bold,
#Chaosfactory h3.bold,
#Chaosfactory h4.bold,
#Chaosfactory h5.bold,
#Chaosfactory h6.bold {
	font-weight: bold;
}

#Chaosfactory div#legal a {
  color: #bbb;
}

#Chaosfactory p.image-note {
  color: #ddd;
  font-size: 90%;
  font-style: italic;
  text-align: center;
}

#Chaosfactory p.shipping-note {
  color: #ddd;
  font-size: 70%;
  font-style: italic;
  text-align: justify;
}

#Chaosfactory div#news-card a.news-read-more {
  font-style: italic;
  color: #fff;
}

#Chaosfactory p span.emphasis {
  font-style: italic;
  font-weight: bold;
}

#Chaosfactory div#webmaster {
  text-align: right;
}

@media (max-width: 575.98px) {
  #Chaosfactory div#webmaster {
    text-align: left;
  }
}

/* Shop */

#Chaosfactory p.capitalized {
  text-transform: uppercase;
  font-family: "Open Sans Condensed", sans-serif;
}

#Chaosfactory td.price {
  font-size: 140%;
  text-align: right;
}

#Chaosfactory td.price-description {
  font-size: 120%;
  text-align: left;
  text-transform: uppercase;
  font-family: "Open Sans Condensed", sans-serif;
}

#Chaosfactory tr.price-total {
  border-top: solid 1px #aaa;
}

#Chaosfactory form.shopform input,
#Chaosfactory form.shopform textarea {
  background-color: rgba(255, 255, 255, 0.173);
  border: solid 1px #aaa;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 110%;
  color: #fff;
}
#Chaosfactory form.shopform .album-quantity {
  text-align: center;
  font-size: 110%;
  font-weight: bold;
}
#Chaosfactory form.shopform #buy-button {
  font-size: 110%;
  color: #000;
  border: solid 1px #000;
  padding: 20px 30px;
  background-color: rgba(255, 255, 255, 0.733);
}
#Chaosfactory form.shopform #buy-button:hover {
  color: #eee;
  border: solid 1px #eee;
  background-color: #000;
}

#Chaosfactory .error-heading {
  color: #f99;
  font-weight: bold;  
}
#Chaosfactory form.shopform .shop-form-error {
  border: solid 1px rgba(255, 0, 0, 0.345) !important;
  background-color: rgba(255, 0, 0, 0.172) !important;
}
#Chaosfactory form.shopform .shop-form-policy-error {
  border: solid 1px rgba(255, 0, 0, 0.345) !important;
  background-color: rgba(255, 0, 0, 0.172) !important;
  padding: 5px;
}
#Chaosfactory form .form-error-message {
  border: solid 1px rgba(255, 0, 0, 0.345);
  background-color: rgba(255, 0, 0, 0.172);
  text-align: center;
  font-size: 120%;
}

#Chaosfactory input[type=checkbox].styled-checkbox {
  position:absolute; 
  z-index:-1000; 
  left:-1000px; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height:1px; 
  width:1px; 
  margin:-1px; 
  padding:0; 
  border:0;
}
#Chaosfactory input[type=checkbox].styled-checkbox + label.styled-checkbox-label {
  padding-left:29px;
  height:24px; 
  display:inline-block;
  line-height:21px;
  background-repeat:no-repeat;
  background-position: 0 0;
  font-size:24px;
  vertical-align:middle;
  cursor:pointer;
}
#Chaosfactory input[type=checkbox].styled-checkbox:checked + label.styled-checkbox-label {
  background-position: 0 -24px;
}
#Chaosfactory label.styled-checkbox-label {
  background-image:url("csscheckbox.png");
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Cards */

#Chaosfactory div#site-card {
  padding: 10px;
}

#Chaosfactory div#video-card {
  padding: 10px;
}

#Chaosfactory div#news-card {
  font-size: 90%;
  color: #fff;
}

#Chaosfactory div.news-read-more-space {
  text-align: right;	
}

/* Previous styles */

#Chaosfactory div.album {
  margin-top: 40%;
  position: relative;
  overflow: hidden;
}

#Chaosfactory img#album-logo {
  width: 95%;
  height: auto;
}

#Chaosfactory img#album-flare {
  position: absolute;
  left: 2.5%;
  top: 0%;
  width: 95%;
  height: auto;
  opacity: 0;
}

#Chaosfactory img#coming-soon {
  width: 60%;
  max-height: 2%;
  margin-top: 10%;
}

@media (min-width: 550px) {

  #Chaosfactory div.album {
    margin-top: 0;
  }

  #Chaosfactory img#album-logo {
    width: 60%;
  }

  #Chaosfactory img#album-flare {
    top: -25%;
    opacity: 0;
  }

  #Chaosfactory img#coming-soon {
    width: auto;
    max-width: 20%;
    max-height: 2%;
    margin-top: 2%;
  }

}

#Chaosfactory p.spaced {
  letter-spacing: 20px;
}

#Chaosfactory div#social-logos {
  overflow: hidden;
  text-align: right;
  font-size: 85%;
}
#Chaosfactory div#social-image-container {
  margin: 10px;
}
#Chaosfactory div#social-logos img.youtube {
  width: 5%;
  min-width: 20px;
}
#Chaosfactory div#social-logos img.facebook {
  width: 4%;
  min-width: 15px;
}
#Chaosfactory div#social-logos img.instagram {
  width: 4%;
  min-width: 15px;
}
#Chaosfactory div#social-logos img.spotify {
  width: 4.5%;
  min-width: 15px;
}

#Chaosfactory div#legal-banner {
  position: absolute;
  border: solid 1px #101010;
  background-color: rgba(255, 255, 255, 0.8);
  color: #101010;
  border-radius: 5px;
  font-size: 70%;
  text-align: left;
  padding: 5px;
  left: 25px;
  bottom: 25px;
  max-width: 70%;
}

#Chaosfactory div#cookie-banner {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 2%;
  z-index: 50;
  border: solid 1px #568eff;
  background-color: rgba(255, 255, 255, 0.9);
  color: #101010;
  border-radius: 5px;
  font-size: 80%;
  text-align: center;
  padding: 30px;
  display: none;
}

#Chaosfactory div#cookie-banner p {
  font-size: 80%;
  text-align: center;
}

@media (min-width: 850px) {

  #Chaosfactory div#cookie-banner {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 4%;
    font-size: 100%;
  }

  #Chaosfactory div#cookie-banner p {
    font-size: 100%;
  }
  
}

#Chaosfactory div#cookie-banner h1 {
  border-bottom: solid 1px black;
  font-size: 135%;
  margin-bottom: 15px;
}

#Chaosfactory div#cookie-banner a {
  color: #1010bb;
}

#Chaosfactory div#info-cookies-button {
  display: inline-block;
  border-radius: 5px;
  padding: 15px;
  border: solid 2px black;
  margin: 5px;
  width: 40%;
  font-variant: small-caps;
}

#Chaosfactory a div#info-cookies-button {
  color: #101010;
}
#Chaosfactory a:hover div#info-cookies-button {
  background-color: rgba(255, 255, 255, 1.0);
}

#Chaosfactory div#allow-cookies-button {
  display: inline-block;
  border-radius: 5px;
  padding: 15px;
  border: solid 2px #001272;
  background-color: #86caef;
  color: #001272;
  margin: 5px;
  width: 40%;
  font-variant: small-caps;
}
#Chaosfactory a:hover div#allow-cookies-button {
  background-color: #aed1ff;
}