/* CSS Document */

body {
	font-family: 'Poppins', sans-serif;
	color: black;
	/*margin-top: 130px;*/
    /*margin-top: 40px;*/
}

.header-bkg {
	background-color: hsla(0,0%,0%,0.75)
}
h1 {
	/*font-weight: 900;*/
	font-weight: 900;
	font-size: 2.5em;
	margin-bottom: .5em;
	/*letter-spacing: -1px;*/
	text-shadow: 1px 0 black;
}
@media (min-width: 576px) { 
		h1  {
		font-size: 2.8em;
	}
}
@media (min-width: 768px) {
	h1 {
		font-size: 3.2em;
	}
}	
@media (min-width: 992px) { 
	h1  {
		font-size: 3.6em;
	}
}

.steps h3{
    letter-spacing: 2px;
    
}
.steps-header {
    margin-top: 1em;
    margin-bottom: .8em;
}

.btn {
	margin-top: 1em;
	margin-bottom: 2em;
	border-radius: 20px;
	padding-left: 50px;
	padding-right: 50px;
	font-weight: bold;
	text-transform: uppercase;
    letter-spacing: 3px;
}

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}


.image-shadow {
-webkit-box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.15);
box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.15);
}

/* The slow way */
.make-it-slow {
-webkit-box-shadow: 0px 4px 3px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 4px 3px 2px rgba(0,0,0,0.25);
box-shadow: 0px 4px 3px 2px rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
-webkit-box-shadow: 0px 18px 30px -4px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 18px 30px -4px rgba(0,0,0,0.45);
box-shadow: 0px 18px 30px -4px rgba(0,0,0,0.45);
}
/* ========== JUMBOTRON Definitions =========*/
.jumbotron {
	background-size:cover;
	height: 200px;
	/*padding-top: 65px;*/
	/*color:white;	
	text-shadow: 2px 2px rgba(0,0,0,0.2);*/
	margin-bottom:0px;
}
@media (min-width: 576px) {
	.jumbotron {
		/*padding-top: 80px;*/
		height: 300px;
	}
}

.logo {
    Height:80px;
    width: 100%;
    margin-top: 1.5rem;
}

@media (min-width: 576px) { 
.logo {    
    Height:110px;
    width: 100%;
    margin-top: 2rem;
	}
}


#xbox {
	background: url("../_media/jumbotron-xbox.png") no-repeat center center; 
	background-size:cover;
}

.hr-margin {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.card-brand {
    text-align: center;
    height: 160px;
    background-color: red;
    padding-top: 1.5em;
}
a.nohover:hover { 
    color: black;
    text-decoration: none;
}

a.nohover {
   color: inherit;

}

a.nohover:hover { 
    color: none;  
}
.shadow-animation {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.2s ease-in-out;
}

#features img {
    max-height: 120px;
    width: auto;
}
.vertical-line {
    padding-left: 40px;
    padding-right: 40px;
}

/* Transition to a bigger shadow on hover */
.shadow-animation:hover {
-webkit-box-shadow: 0px 10px 30px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 30px 2px rgba(0,0,0,0.25);
box-shadow: 0px 10px 30px 2px rgba(0,0,0,0.25);
}

.card-brand {
    text-align: center;
    height: 160px;
    background-color: red;
    padding-top: 1.5em;
}
.card-title {
    color: #888888;
}

.card-text-small {
    font-size: .72em;
    color:#888888;
}




/* ========== END JUMBOTRON Definitions =========*/


/*image sizing*/
.user-img {
    padding: 3% 3% 0 3%;
    margin-bottom: 2rem;
}

/*====== image fade  ==========*/
.container-image {
    position: relative;
    max-height: 300px;

}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .7s ease;
  background-color:rgba(45,45,45,0.97);
    border-radius: 5px;
}

.container-image:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  /*font-size: 20px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.flex { display: flex; }
.form-control { min-width: 0; }




.app-icons img {
    margin-top: 1em;
}


/*START   XBOX controller icons*/

.inlineButtonImage {
    display: inline-block;
    width: 32px;
    height: 32px;
    -ms-transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);
    vertical-align: middle;
    margin: -10px -6px -4px -6px;
}

.xBoxButtonImage_RGB16 {
    background: url(//support.xbox.com/Content/images/gameControllerIcons_32x_RGB16.png) no-repeat -411px -11px;
}




/*END   XBOX controller icons*/