/* CSS Document */
/*--------------------------------------------------------------
General CSS
--------------------------------------------------------------*/

body {
    background-color: #313638;
    color: #DDD;
    font-family: 'Syne Mono', monospace;
    margin: 0px;
    text-align: center;
	vertical-align: center;
    text-shadow: 1px 1px 2px var(--text-shadow-color);
}

main {
    margin: 0px;
}

.container-pad {
	padding: 3% 0 3% 0;
}
.container-marg {
	margin: 3% 0 3% 0;
}

.bg-part-transparent {
	background-color: #313638;
	opacity: 0.8;
}
.hero {
    background-image: url(../../media/galaxy-hero.jpg);
	background-attachment: fixed;
}
.index-center-graphic {
	background-image: url(../../media/aurorab-mod.jpg)
}
.bg-main-img {
    background-image: url(../../media/galaxy-hero.jpg);
	background-attachment: fixed;
}
.navbar-grad {
    background-color: #E8E9EB;
    background-image: url(url);
}

.btn {
	background-color: #F06543;
}


/*--------------------------------------------------------------
# Streaming
--------------------------------------------------------------*/

.pb-video-container {
	display: flex;
	justify-content: space-around;
	padding-top: 3%;
	background-color: #313638;
	opacity: 0.8;
}

.pb-video {

	border: 1px solid #e6e6e6;

}

	.pb-video:hover {
		background: #2c3e50;
	}

.pb-video-frame {
	transition: width 2s, height 2s;
}

	.pb-video-frame:hover {
		height: 300px;
	}

.pb-row {
	margin-bottom: 10px;
}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

.form-section {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    font-family:"Raleway", sans-serif;
}
.form-container{
    width:500px;
    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
    padding:2em;
}
.form-item{
    margin-bottom:1.5em;
    transition:all .3s;
}
.form-label{
    font-size:.75em;
    color:var(--font-color);
    display:block;
    opacity:0;
    transition: all .3s;
    transform:translateX(-50px);
}
.form-control{
    box-shadow:none;
    border-radius:0;
    border-color:#ccc;
    border-style:none none solid none;
    width:100%;
    font-size:1.25em;
    transition:all .6s;
}
.form-control::placeholder{
    color:#aaa;
}
.form-control:focus{
    box-shadow:none;
    border-color:var(--font-hover-color);
    outline:none;
}
.form-item:focus-within{
    transform:scale(1.1,1.1);
}
.form-control:invalid:focus{
    border-color:red;
}
.form-control:valid:focus{
    border-color:green;
}
.form-btn{
    background: 0 0 #fff;
    border:1px solid #aaa;
    border-radius:3px;
    color:var(--font-color);
    font-size:1em;
    padding:10 50px;
    text-transform:uppercase;
}
.form-btn:hover{
    border-color:#22f;
    color:#22f;
}
.focused > .form-label{
    opacity:1;
    transform:translateX(0px);
}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


#footer {
    background-color: #313638;
	background-image: linear-gradient(#313638,90%, #F09D51);
    padding: 5% 0 5% 0;
    color: #fff;
    font-size: 14px;
	align-content: center;
  }

.aff-links {
	width: 70%;
	height: 30%;
	margin: auto;
	align-content: center;
}

.aff-links > a > img {
  width: 100%;
  height: auto;
}

.social-links .fa {
    padding: 20px;
    font-size: 30px;
    width: 70px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  }
  
 .fa:hover {
      opacity: 0.7;
  }
 .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
 .fa-twitter {
    background: #55ACEE;
    color: white;
  }
  
 .fa-google {
    background: #dd4b39;
    color: white;
  }
  
 .fa-linkedin {
    background: #007bb5;
    color: white;
  }
  
 .fa-youtube {
    background: #bb0000;
    color: white;
  }
  
 .fa-instagram {
    background: #125688;
    color: white;
  }
  
 .fa-pinterest {
    background: #cb2027;
    color: white;
  }
  
 .fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
  
 .fa-skype {
    background: #00aff0;
    color: white;
  }
  
 .fa-android {
    background: #a4c639;
    color: white;
  }
  
 .fa-dribbble {
    background: #ea4c89;
    color: white;
  }
  
 .fa-vimeo {
    background: #45bbff;
    color: white;
  }
  
 .fa-tumblr {
    background: #2c4762;
    color: white;
  }
  
 .fa-vine {
    background: #00b489;
    color: white;
  }
  
 .fa-foursquare {
    background: #45bbff;
    color: white;
  }
  
 .fa-stumbleupon {
    background: #eb4924;
    color: white;
  }
  
 .fa-flickr {
    background: #f40083;
    color: white;
  }
  
 .fa-yahoo {
    background: #430297;
    color: white;
  }
  
 .fa-soundcloud {
    background: #ff5500;
    color: white;
  }
  
 .fa-reddit {
    background: #ff5700;
    color: white;
  }
  
 .fa-rss {
    background: #ff6600;
    color: white;
  }
.social-links .mewe {
    margin-top: 5%;
  }
#footer .footer-top h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--highlight-bluegray-color);
    position: relative;
    padding-bottom: 12px;
  }
#footer .footer-top .footer-links {
    margin-bottom: 30px;
  }
#footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
#footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: #a2cce3;
    font-size: 18px;
    line-height: 1;
  }
#footer .footer-top .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
#footer .footer-top .footer-links ul li:first-child {
    padding-top: 0;
  }
#footer .footer-top .footer-links ul a {
    color: #fff;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
  }
#footer .footer-top .footer-links ul a:hover {
    color: #a2cce3;
  }
#footer div h4 {
	margin-top: 3%;
	margin-bottom: 3%;
}
#footer .copyright {
    text-align: center;
    padding-top: 30px;
  }
#footer .credits {
    padding-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #fff;
  }
#footer .credits a {
    color: #a2cce3;
  }